mirror of
https://github.com/jaandrle/deka-dom-el
synced 2024-11-23 09:09:38 +01:00
22 lines
783 B
JavaScript
22 lines
783 B
JavaScript
|
class CustomHTMLElement extends HTMLElement{
|
||
|
|
static tagName = "custom-element"; // just suggestion, we can use `el(CustomHTMLElement.tagName)`
|
||
|
|
static observedAttributes= [ "custom-attribute" ];
|
||
|
|
constructor(){
|
||
|
|
super();
|
||
|
|
// nice place to prepare custom element
|
||
|
|
}
|
||
|
|
connectedCallback(){
|
||
|
|
// nice place to render custom element
|
||
|
|
}
|
||
|
|
attributeChangedCallback(name, oldValue, newValue){
|
||
|
|
// listen to attribute changes (see `observedAttributes`)
|
||
|
|
}
|
||
|
|
disconnectedCallback(){
|
||
|
|
// nice place to clean up
|
||
|
|
}
|
||
|
|
// for example, we can mirror get/set prop to attribute
|
||
|
|
get customAttribute(){ return this.getAttribute("custom-attribute"); }
|
||
|
|
set customAttribute(value){ this.setAttribute("custom-attribute", value); }
|
||
|
|
}
|
||
|
|
customElements.define(CustomHTMLElement.tagName, CustomHTMLElement);
|