Using custom elements in combinantion with DDE
// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js
import {
customElementRender,
customElementWithDDE,
observedAttributes,
} from "deka-dom-el";
/** @type {ddePublicElementTagNameMap} */
import { S } from "deka-dom-el/signals";
S.observedAttributes;
// “internal” utils
import { lifecyclesToEvents } from "deka-dom-el";
# Custom Elements Introduction
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);
Handy Custom Elements' Patterns
# Mnemonic
customElementRender(<custom-element>, <render-function>[, <properties>])— use function to render DOM structure for given <custom-element>customElementWithDDE(<custom-element>)— register <custom-element> to DDE library, see also `lifecyclesToEvents`, can be also used as decoratorobservedAttributes(<custom-element>)— returns record of observed attributes (keys uses camelCase)S.observedAttributes(<custom-element>)— returns record of observed attributes (keys uses camelCase and values are signals)lifecyclesToEvents(<class-declaration>)— convert lifecycle methods to events, can be also used as decorator