🔨 docs

docs_src/components/code.html.js

@@ -1,6 +1,7 @@
 import { registerClientFile, styles } from "../ssr.js";
-styles.scope(code).css`
-:host{
+const host= "."+code.name;
+styles.css`
+${host}{
 	--shiki-color-text: #e9eded;
 	--shiki-color-background: #212121;
 	--shiki-token-constant: #82b1ff;
@@ -14,7 +15,7 @@ styles.scope(code).css`
 	--shiki-token-link: #EE0000;
 	white-space: pre;
 }
-:host[data-js=todo]{
+${host}[data-js=todo]{
 	border: 1px solid var(--border);
 	border-radius: var(--standard-border-radius);
 	margin-bottom: 1rem;

docs_src/components/example.html.js

@@ -1,6 +1,7 @@
 import { styles } from "../ssr.js";
-styles.scope(example).css`
-:host{
+const host= "."+example.name;
+styles.css`
+${host}{
 	grid-column: full-main;
 	width: 100%;
 	max-width: calc(9/5 * var(--body-max-width));
@@ -14,6 +15,7 @@ styles.scope(example).css`
 `
 import { el } from "deka-dom-el";
 import { code } from "./code.html.js";
+import { relative } from "node:path";
 /**
  * Prints code to the page and registers flems to make it interactive.
  * @param {object} attrs
@@ -25,7 +27,7 @@ export function example({ src, language= "js", page_id }){
 	registerClientPart(page_id);
 	const content= s.cat(src).toString()
 		.replaceAll(/ from "deka-dom-el(\/signals)?";/g, ' from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";');
-	const id= "code-"+Math.random().toString(36).slice(2, 7);
+	const id= "code-example-"+generateCodeId(src);
 	return el().append(
 		el(code, { id, content, language, className: example.name }),
 		elCode({ id, content, extension: "."+language })
@@ -48,3 +50,16 @@ function registerClientPart(page_id){
 	);
 	is_registered[page_id]= true;
 }
+const store_prev= new Map();
+/** @param {URL} src */
+function generateCodeId(src){
+	const candidate= parseInt(relative((new URL("..", import.meta.url)).pathname, src.pathname)
+		.split("")
+		.map(ch=> ch.charCodeAt(0))
+		.join(""), 10)
+		.toString(36)
+		.replace(/000+/g, "");
+	const count= 1 + ( store_prev.get(candidate) || 0 );
+	store_prev.set(candidate, count);
+	return count.toString()+"-"+candidate; 
+}

docs_src/components/examples/events/compareDispatch.js

@@ -9,6 +9,16 @@ document.body.append(
 		el("button", "dde with options", on("click", ddeOptions))
 	)
 );
-function native(){ this.dispatchEvent(new CustomEvent("test", { bubbles: true, detail: "hi" })); }
-function dde(){ dispatchEvent("test")(this.parentElement, "hi"); }
-function ddeOptions(){ dispatchEvent("test", { bubbles: true })(this, "hi"); }
+function native(){
+	this.dispatchEvent(
+		new CustomEvent("test",
+			{ bubbles: true, detail: "hi" }
+		)
+	);
+}
+function dde(){
+	dispatchEvent("test")(this.parentElement, "hi");
+}
+function ddeOptions(){
+	dispatchEvent("test", { bubbles: true })(this, "hi");
+}

docs_src/components/pageUtils.html.js

@@ -1,15 +1,16 @@
 import { pages, styles } from "../ssr.js";
-styles.scope(prevNext).css`
-:host{
+const host= "."+prevNext.name;
+styles.css`
+${host}{
 	display: grid;
 	grid-template-columns: 1fr 2fr 1fr;
 	margin-top: 1rem;
 	border-top: 1px solid var(--border);
 }
-:host [rel=prev]{
+${host} [rel=prev]{
 	grid-column: 1;
 }
-:host [rel=next]{
+${host} [rel=next]{
 	grid-column: 3;
 	text-align: right;
 }