⚡ on.host

README.md

@@ -31,7 +31,7 @@ function EmojiCounter({ initial }) {
 		el("p", {
 			className: "output",
 			textContent: S(() =>
-				`Hello World ${emoji.get().repeat(clicks.get())}`),
+				`Hello World ${emoji.get().repeat(count.get())}`),
 		}),
 
 		// 🎮 Controls - Update state on events
@@ -39,12 +39,12 @@ function EmojiCounter({ initial }) {
 			on("click", () => count.set(count.get() + 1))
 		),
 
-		el("select", null,
+		el("select", null, on.host(el=> el.value= initial),
 			on("change", e => emoji.set(e.target.value))
 		).append(
-			el(Option, "🎉", isSelected),
-			el(Option, "🚀", isSelected),
-			el(Option, "💖", isSelected),
+			el(Option, "🎉"),
+			el(Option, "🚀"),
+			el(Option, "💖"),
 		)
 	);
 }

docs/components/examples/events/live-cycle.js

@@ -1,13 +1,28 @@
 import { el, on } from "deka-dom-el";
-const paragraph= el("p", "See lifecycle events in console.",
-	el=> log({ type: "dde:created", detail: el }),
-	on.connected(log),
-	on.disconnected(log),
-);
+function allLifecycleEvents(){
+	return el("form", null,
+		el=> log({ type: "dde:created", detail: el }),
+		on.connected(log),
+		on.disconnected(log),
+	).append(
+		el("select", { id: "country" }, on.host(select => {
+			// This runs when the host (select) is ready with all its options
+			select.value = "cz"; // Pre-select Czechia
+			log({ type: "dde:on.host", detail: select });
+		})).append(
+			el("option", { value: "au", textContent: "Australia" }),
+			el("option", { value: "ca", textContent: "Canada" }),
+			el("option", { value: "cz", textContent: "Czechia" }),
+		),
+		el("p", "See lifecycle events in console."),
+	);
+}
 
 document.body.append(
-	paragraph,
-	el("button", "Remove", on("click", ()=> paragraph.remove()))
+	el(allLifecycleEvents),
+	el("button", "Remove Element", on("click", function(){
+		this.previousSibling.remove();
+	}))
 );
 
 /** @param {Partial<CustomEvent>} event */

docs/p03-events.html.js

@@ -155,8 +155,8 @@ export function page({ pkg, info }){
 			You can think of an Addon as an “oncreate” event handler.
 		`),
 		el("p").append(T`
-			dd<el> provides two additional lifecycle events that correspond to ${el("a", { textContent:
-				"custom element", ...references.mdn_customElements })} lifecycle callbacks:
+			dd<el> provides three additional lifecycle events that correspond to ${el("a", { textContent:
+				"custom element", ...references.mdn_customElements })} lifecycle callbacks and component patterns:
 		`),
 		el("div", { className: "function-table" }).append(
 			el("dl").append(
@@ -165,6 +165,9 @@ export function page({ pkg, info }){
 
 				el("dt", t`on.disconnected(callback)`),
 				el("dd", t`Fires when the element is removed from the DOM`),
+				
+				el("dt", t`on.host(callback, host?)`),
+				el("dd", t`Fires when the host element is "ready" and allows applying properties based on the fully built template`),
 			)
 		),
 		el(example, { src: fileURL("./components/examples/events/live-cycle.js"), page_id }),