template-element
Usage
; customElements; // Use it...<my-element></my-element>
More detail
rerender
function
The The rerender
function has a syntax of:
this
selector
denotes the selectors of the elements to be rerendered. It defaults to *
if nothing is passed.
rerender
rerenders the parts of the page that match selector
. This is useful when you programatically change a property that is not bound to an attribute.
rerender
is automatically called when one of the attributes denoted in static get observedAttributes
.
addObservable
fuction
The The addObservable
function has a syntax of:
this
It will add a getter/setter for propertyName
that changes attributeName
. This is useful for the angular-style bindings.
addElementProperty
function
The The addElementProperty
function has a syntax of:
this
It adds a read-only property called name
to the class, which will reference the element referred to by selector
.
Angular-style bindings
Angular-style bindings are denoted by the {{
var
}}
syntax. This resolves to the var
property on the element.
There are also two special bindings, {{children}}
and {{js[]}}
. {{children}}
will insert a <slot></slot>
. If you pass it a name, it will insert a slot with that name, like so: {{children[slot:
slotName
}}
. {{js[
code
]}}
will evaluate code
and insert the result.
You can use them in the HTML, the CSS, or even the external stylesheet URLs.
Event handlers
You can bind an event handler to an element with attributes of an @ sign followed by the name of the event. The value will be the name of the function on the element class that is to handle the event.
Example:
...