🔤 Improves and updates docs

- customElementRender
- introduction example

docs/components/examples/customElement/dde.js

@@ -7,7 +7,6 @@ export class HTMLCustomElement extends HTMLElement{
 	static observedAttributes= [ "attr" ];
 	connectedCallback(){
 		customElementRender(
-			this,
 			this.attachShadow({ mode: "open" }),
 			ddeComponent
 		);

docs/components/examples/customElement/observedAttributes.js

@@ -11,7 +11,6 @@ export class HTMLCustomElement extends HTMLElement{
 	connectedCallback(){
 		console.log(observedAttributes(this));
 		customElementRender(
-			this,
 			this.attachShadow({ mode: "open" }),
 			ddeComponent,
 			S.observedAttributes

docs/components/examples/customElement/shadowRoot.js

@@ -17,11 +17,7 @@ function ddeComponent(){
 export class A extends HTMLElement{
 	static tagName= "custom-element-without";
 	connectedCallback(){
-		customElementRender(
-			this,
-			this,
-			ddeComponent
-		);
+		customElementRender(this, ddeComponent);
 	}
 }
 customElementWithDDE(A);
@@ -30,7 +26,6 @@ export class B extends HTMLElement{
 	static tagName= "custom-element-open";
 	connectedCallback(){
 		customElementRender(
-			this,
 			this.attachShadow({ mode: "open" }),
 			ddeComponent
 		);
@@ -42,7 +37,6 @@ export class C extends HTMLElement{
 	static tagName= "custom-element-closed";
 	connectedCallback(){
 		customElementRender(
-			this,
 			this.attachShadow({ mode: "closed" }),
 			ddeComponent
 		);

docs/components/examples/customElement/simulateSlots.js

@@ -8,7 +8,7 @@ export class HTMLCustomElement extends HTMLElement{
 	static tagName= "custom-slotting";
 	connectedCallback(){
 		const c= ()=> simulateSlots(this, ddeComponent());
-		customElementRender(this, this, c);
+		customElementRender(this, c);
 	}
 }
 customElementWithDDE(HTMLCustomElement);

docs/components/examples/introducing/helloWorld.js

@@ -1,18 +1,36 @@
-import { el } from "deka-dom-el";
+import { el, on } from "deka-dom-el";
 import { S } from "deka-dom-el/signals";
 document.body.append(
-	el(HelloWorldComponent)
+	el(HelloWorldComponent, { initial: "🚀" })
 );
-function HelloWorldComponent(){
-	const clicksS= S(0); // A
+/** @typedef {"🎉" | "🚀"} Emoji */
+/** @param {{ initial: Emoji }} attrs */
+function HelloWorldComponent({ initial }){
+	const clicks= S(0);
+	const emoji= S(initial);
+	/** @param {HTMLOptionElement} el */
+	const isSelected= el=> (el.selected= el.value===initial);
+	// @ts-expect-error 2339: The <select> has only two options with {@link Emoji}
+	const onChange= on("change", event=> emoji(event.target.value));
+
 	return el().append(
-		el("p", S(()=>
-			"Hello World "+"🎉".repeat(clicksS()) // B
-		)),
-		el("button", {
-			type: "button",
-			onclick: ()=> clicksS(clicksS()+1), // C
-			textContent: "Fire",
-		})
-	)
+		el("p", {
+			textContent: S(() => `Hello World ${emoji().repeat(clicks())}`),
+			className: "example",
+			ariaLive: "polite", //OR ariaset: { live: "polite" },
+			dataset: { example: "Example" }, //OR dataExample: "Example",
+		}),
+		el("button",
+			{ textContent: "Fire", type: "button" },
+			on("click", ()=> clicks(clicks() + 1)),
+			on("keyup", ()=> clicks(clicks() - 2)),
+		),
+		el("select", null, onChange).append(
+			el(OptionComponent, "🎉", isSelected),//OR { textContent: "🎉" }
+			el(OptionComponent, "🚀", isSelected),//OR { textContent: "🚀" }
+		)
+	);
+}
+function OptionComponent({ textContent }){
+	return el("option", { value: textContent, textContent })
 }