⚡ Docs

docs/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" })
+);