💥 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);