lit-element

Lit Element - multiple properties in one decorator

I'm reading some Lit Element codes from internet, and I see they declare multiple properties in a single decorator:

@property()
rowData: string = '';
rowDataCount: number = 0;

I'm wondering how it behaves and in this case how can I use type converter:

@property({ type: <String or Number here????> })
rowData: string = '';
rowDataCount: number = 0;

Thank you

Solution

  • You cannot apply the decorator to two members in one go.

    I am afraid you were mislead by the two members being right underneath each other. The @property() decorator only applies to the rowData member. The following two snippets are equivalent:

    // snippet A: no visual separation
@property()
rowData: String = '';
rowDataCount: number = 0;

    // snippet B: with blank lines for visual separation
@property()
rowData: String = '';

rowDataCount: number = 0;