Properties

Attributes/Properties

With attributes and properties you can build out and define the public API of an element. element-js elements can have three different types of properties.

export class MyElement extends BaseElement {
    _privatePropery = 'I am private (by convention)';
    publicProperty = 'I am public';

    properties() {
        return {
            reactivePublicProperty: 'I am public & reactive'
        };
    }

    log() {
        console.log(this._privatePropery);
        console.log(this.publicProperty);
        console.log(this.reactivePublicProperty);
    }
}

defineElement('my-element', MyElement);

Defining properties in JavaScript

Public properties for JavaScript classes where recently added by the JavaScript standard committee. For more information see the Class fields documentation on MDN .

On top of these fields element-js adds another form of properties - reactive properties. By overwriting the properties() method on your element and returning an object of key/value pairs you can define a list of reactive public properties. Behind the scenes element-js will automatically generate getters and setters for each property and trigger an update/render for the element when these properties change.

All types of properties can be accessed via the this operator within the element class or the template function.

Using attributes/properties in HTML

element-js will merge all attributes with the reactive properties map. Values set via attribute will always take precedence over values defined in the properties map. Attributes will still be defined as properties even when they are not set in the properties map.

HTML only has the concept of attributes and string values. element-js will automatically convert attributes to their correct types of string, number, boolean, array and object.

In JavaScript you will typically use camelCase for declaring properties. HTML attributes however only can be lowercase. element-js will therefore convert dash-case names to camelCase variables and vice versa.

Property options

Reactive properties can be fine-tuned further by providing options via the constructor. See propertyOptions in Constructor options .