Properties And Attributes
The custom element specification allows the use of properties and attributes in a custom element.
Polymer properties make it easy to use and add to their capabilities giving you more power when building components.
Properties can be declared with their properties type and a default value.
\\Syntax static get properties() { return { property_Name:data_Type, } } ---------------------------------------------------------------- \\Example :- static get properties() { return { lfcName: { type: String, value: 'Letsfindcourse' } }; } *A property with a name of lfcName is defined.*
If we have an attribute on a custom element that is named as a property name, then the value of that attribute will be set to the value of the property with the polymer.
\\Syntax < template-name property-name=“valueâ€> template-name> -------------------------------------------------------- \\Example < my-element gator-name="Lfc_courses"> my-element> * This will override the default value of gatorName with Lfc_courses *
Property keys
Key | Description | Type |
---|---|---|
type | Type is used for transforming the data defined in an template attribute into a property value. | Boolean, Date, Number, String, Array or Object |
value | Value is the default value for the property and it can be useful when we need a default behaviour. | boolean, number, string or function |
reflectToAttribute | reflectToAttribute can be especially useful for styling on condition.If this key value set to true, then whenever the property value changes cause the corresponding attribute to set on the host node. | boolean |
readOnly | readOnly prevents attribute values from mapping onto the property. | boolean |
computed | The value is interpreted as a method name and argument list. | string |
notify | notify properties are automatically data bound and when notify is true, we can get Polymer to fire events on property value changes. | boolean |
observer | It will be invoked when the property value changes. | string |
Visit :
Discussion