🔤 ce wip

docs_src/components/examples/customElement/shadowRoot.js

@@ -0,0 +1,60 @@
+import {
+	el,
+	customElementRender,
+	customElementWithDDE,
+} from "deka-dom-el";
+function ddeComponent(){
+	return el().append(
+		el("p", { className: "red" }).append(
+			"Hello from ", el("slot", "Custom Element"), "!"
+		)
+	);
+}
+
+export class A extends HTMLElement{
+	static tagName= "custom-element-without";
+	connectedCallback(){
+		customElementRender(
+			this,
+			this,
+			ddeComponent
+		);
+	}
+}
+customElementWithDDE(A);
+customElements.define(A.tagName, A);
+export class B extends HTMLElement{
+	static tagName= "custom-element-open";
+	connectedCallback(){
+		customElementRender(
+			this,
+			this.attachShadow({ mode: "open" }),
+			ddeComponent
+		);
+	}
+}
+customElementWithDDE(B);
+customElements.define(B.tagName, B);
+export class C extends HTMLElement{
+	static tagName= "custom-element-closed";
+	connectedCallback(){
+		customElementRender(
+			this,
+			this.attachShadow({ mode: "closed" }),
+			ddeComponent
+		);
+	}
+}
+customElementWithDDE(C);
+customElements.define(C.tagName, C);
+
+document.body.append(
+	el("style", `
+		.red{ color: red; }
+	`),
+	el(A.tagName).append("Without shadowRoot"),
+	el("hr"),
+	el(B.tagName).append("Open shadowRoot"),
+	el("hr"),
+	el(C.tagName).append("Closed shadowRoot"),
+);

docs_src/p06-customElement.html.js

@@ -101,7 +101,7 @@ export function page({ pkg, info }){
 			information can be ${el("a", { textContent: t`Shadow DOM in Depth`, ...references.shadow_dom_depth })}. To
 			sum up, there in basic three ways to render component body:
 		`),
-
+		el(example, { src: fileURL("./components/examples/customElement/shadowRoot.js"), page_id }),
 
 		el(mnemonic)
 	);

package.json

@@ -62,14 +62,12 @@
 			"limit": "10.5 kB",
 			"gzip": false,
 			"brotli": false
-
 		},
 		{
 			"path": "./signals.js",
 			"limit": "12 kB",
 			"gzip": false,
 			"brotli": false
-
 		},
 		{
 			"path": "./index-with-signals.js",
@@ -95,12 +93,12 @@
 		"typescript"
 	],
 	"devDependencies": {
-		"@size-limit/preset-small-lib": "^11.0.1",
-		"dts-bundler": "^0.1.0",
-		"esbuild": "^0.19.9",
-		"jsdom": "^23.0.1",
-		"jshint": "^2.13.6",
-		"nodejsscript": "github:jaandrle/nodejsscript#dev-v1",
-		"size-limit-node-esbuild": "^0.3.0"
+		"@size-limit/preset-small-lib": "~11.0",
+		"dts-bundler": "~0.1",
+		"esbuild": "~0.24",
+		"jsdom": "~25.0",
+		"jshint": "~2.13",
+		"nodejsscript": "^1.0.2",
+		"size-limit-node-esbuild": "~0.3"
 	}
 }