🔤 Web Components (WIP)

docs_src/components/examples/customElement/customElementWithDDE.js

@@ -0,0 +1,17 @@
+import { customElementWithDDE, el, on } from "deka-dom-el";
+export class HTMLCustomElement extends HTMLElement{
+	static tagName= "custom-element";
+	connectedCallback(){
+		this.append(
+			el("p", "Hello from custom element!")
+		);
+	}
+}
+customElementWithDDE(HTMLCustomElement);
+customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);
+
+const instance= el(HTMLCustomElement.tagName);
+on.connected(e=> console.log("Element connected to the DOM:", e))(instance);
+document.body.append(
+	instance,
+);

docs_src/components/examples/customElement/dde.js

@@ -0,0 +1,33 @@
+import {
+	customElementRender,
+	customElementWithDDE,
+} from "deka-dom-el";
+export class HTMLCustomElement extends HTMLElement{
+	static tagName= "custom-element";
+	static observedAttributes= [ "attr" ];
+	connectedCallback(){
+		customElementRender(
+			this,
+			this.attachShadow({ mode: "open" }),
+			ddeComponent
+		);
+	}
+	set attr(value){ this.setAttribute("attr", value); }
+	get attr(){ return this.getAttribute("attr"); }
+}
+
+import { el, on, scope } from "deka-dom-el";
+function ddeComponent({ attr }){
+	scope.host(
+		on.connected(e=> console.log(e.target.outerHTML)),
+	);
+	return el().append(
+		el("p", `Hello from Custom Element with attribute '${attr}'`)
+	)
+}
+customElementWithDDE(HTMLCustomElement);
+customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);
+
+document.body.append(
+	el(HTMLCustomElement.tagName, { attr: "Attribute" })
+);

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

@@ -1,5 +1,5 @@
-export class CustomHTMLElement extends HTMLElement{
+export class HTMLCustomElement extends HTMLElement{
-	static tagName= "custom-element"; // just suggestion, we can use `el(CustomHTMLElement.tagName)`
+	static tagName= "custom-element"; // just suggestion, we can use `el(HTMLCustomElement.tagName)`
 	static observedAttributes= [ "custom-attribute" ];
 	constructor(){
 		super();
@@ -18,4 +18,4 @@ export class CustomHTMLElement extends HTMLElement{
 	get customAttribute(){ return this.getAttribute("custom-attribute"); }
 	set customAttribute(value){ this.setAttribute("custom-attribute", value); }
 }
-customElements.define(CustomHTMLElement.tagName, CustomHTMLElement);
+customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);

docs_src/p06-customElement.html.js

@@ -58,8 +58,18 @@ export function page({ pkg, info }){
 			For more advanced use of Custom Elements, the summary ${el("a", references.custom_elements_tips)
 			.append( el("strong", t`Handy Custom Elements' Patterns`) )} may be useful. Especially pay attention to
 			linking HTML attributes and defining setters/getters, this is very helpful to use in combination with
-			the library (${el("code", "el(CustomHTMLElement.tagName, { customAttribute: \"new-value\" });")}).
+			the library (${el("code", "el(HTMLCustomElement.tagName, { customAttribute: \"new-value\" });")}).
 		`),
+		el("p").append(...T`
+			Also see the Life Cycle Events sections, very similarly we would like to use
+			${el("a", { textContent: t`DDE events`, href: "./p03-events.html", title: t`See events part of the library documentation` })}.
+			To do it, the library provides function ${el("code", "customElementWithDDE")}…
+		`),
+		el(example, { src: fileURL("./components/examples/customElement/customElementWithDDE.js"), page_id }),
+
+		el("h3", t`Custom Elements with DDE`),
+		el(example, { src: fileURL("./components/examples/customElement/dde.js"), page_id }),
+
 
 		el(mnemonic)
 	);