Polymer Custom Elements

We can create custom element in polymer js by following 3 steps:-

1.Polymer Element - Create a class
2.Polymer Element - Associate class
3.Polymer Element - DOM template

\\1. Polymer Element - Create a class
export class ClassName extends PolymerElement {
static get is() { return ‘template_name'; }
}
----------------------------------------------------------------
\\2.Polymer Element - Associate class
window.customElements.define(‘template_name', ClassName);
or
window.customElements.define(ClassName.is, ClassName);
-----------------------------------------------------------------
\\3.Polymer Element - DOM template
static get template(){
return html`
< style>
< div>……
`;
}

To define a custom element, first create the ES6 class and to add the polymer feature extend the polymer element's base element class, PolymerElement.

After creating the class, we associate the class with the element name.

To add local DOM we have to use static get template() and html ` ….. ` converts the content and scoped styling of the element into an instance of HTMLTemplateElement.

Custom Element Lifecycle Callbacks

The following table gives the custom element lifecycle responses.

1. Constructor :- Constructor called when element is upgraded.
2. Ready :- Ready is called only once when the element is attached with the document for the first time.
3. connectedCallback :- When an element is added to the document at that time connectedCallback is called.
4. disconnectedCallback :- When an element is removed to the document at that time disconnectedCallback is called.
5. attributeChangedCallback :-This is called when we want to change, append, remove or replace an element attribute value.