💥 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",
+		)
+	);
+}

docs_src/p06-customElement.html.js

@@ -0,0 +1,32 @@
+import { simplePage } from "./layout/simplePage.html.js";
+
+import { el } from "deka-dom-el";
+import { example } from "./components/example.html.js";
+import { h3 } from "./components/pageUtils.html.js";
+import { mnemonic } from "./components/mnemonic/customElement-init.js";
+import { code } from "./components/code.html.js";
+/** @param {string} url */
+const fileURL= url=> new URL(url, import.meta.url);
+
+/** @param {import("./types.d.ts").PageAttrs} attrs */
+export function page({ pkg, info }){
+	const page_id= info.id;
+	return el(simplePage, { info, pkg }).append(
+		el("h2", "Using custom elements in combinantion with DDE"),
+		el("p").append(
+
+		),
+		el(code, { src: fileURL("./components/examples/customElement/intro.js"), page_id }),
+
+		el(h3, "Custom Elements Introduction"),
+		el("p").append(
+			el("a", { textContent: "Using custom elements", href: "https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements", title: "Article about custom elements on MDN" })
+		),
+		el(code, { src: fileURL("./components/examples/customElement/native-basic.js"), page_id }),
+		el("p").append(
+			el("a", { textContent: "Handy Custom Elements' Patterns", href: "https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4", title: "Ideas and tips from WebReflection" })
+		),
+
+		el(mnemonic)
+	);
+}

docs_src/ssr.js

@@ -8,6 +8,7 @@ export const pages= [
 	{ id: "p03-events", href: "p03-events", title: "Events and Addons", description: "Using not only events in UI declaratively." },
 	{ id: "p04-observables", href: "p04-observables", title: "Observables and reactivity", description: "Handling reactivity in UI via observables." },
 	{ id: "p05-scopes", href: "p05-scopes", title: "Scopes and components", description: "Organizing UI into components" },
+	{ id: "p06-customElement", href: "p06-customElement", title: "Custom elements", description: "Using custom elements in combinantion with DDE" },
 ];
 /**
  * @typedef registerClientFile