💥 WIP custom elements docs and types and utils

docs_src/components/examples/customElement/intro.js

@@ -0,0 +1,12 @@
+// 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 { lifecycleToEvents } from "deka-dom-el";

docs_src/components/examples/customElement/native-basic.js

@@ -0,0 +1,21 @@
+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);

docs_src/components/mnemonic/customElement-init.js

@@ -0,0 +1,22 @@
+import { el } from "deka-dom-el";
+import { mnemonicUl } from "../mnemonicUl.html.js";
+
+export function mnemonic(){
+	return mnemonicUl().append(
+		el("li").append(
+			el("code", "customElementRender(<custom-element>, <render-function>[, <properties>])"), " — use function to render DOM structure for given <custom-element>",
+		),
+		el("li").append(
+			el("code", "customElementWithDDE(<custom-element>)"), " — register <custom-element> to DDE library, see also `lifecycleToEvents`, can be also used as decorator",
+		),
+		el("li").append(
+			el("code", "observedAttributes(<custom-element>)"), " — returns record of observed attributes (keys uses camelCase)",
+		),
+		el("li").append(
+			el("code", "O.observedAttributes(<custom-element>)"), " — returns record of observed attributes (keys uses camelCase and values are observables)",
+		),
+		el("li").append(
+			el("code", "lifecycleToEvents(<class-declaration>)"), " — convert lifecycle methods to events, can be also used as decorator",
+		)
+	);
+}