deka-dom-el

Using custom elements in combinantion with DDE

// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js
import {
	customElementRender,
	customElementWithDDE,
	observedAttributes,
} from "deka-dom-el";
/** @type {ddePublicElementTagNameMap} */
import { O } from "deka-dom-el/observables";
O.observedAttributes;

// “internal” utils
import { lifecyclesToEvents } from "deka-dom-el";

# Custom Elements Introduction

Using custom elements

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 decorator
observedAttributes(<custom-element>) — returns record of observed attributes (keys uses camelCase)
O.observedAttributes(<custom-element>) — returns record of observed attributes (keys uses camelCase and values are observables)
lifecyclesToEvents(<class-declaration>) — convert lifecycle methods to events, can be also used as decorator

Scopes and components (previous)