v0.7.1 (dispatchEvent, docs)

docs_src/components/examples/events/compareDispatch.js

@@ -0,0 +1,14 @@
+import { el, on, dispatchEvent } from "deka-dom-el";
+document.body.append(
+	el("p", "Listenning to `test` event.", on("test", console.log)).append(
+		el("br"),
+		el("button", "native", on("click", native)),
+		" ",
+		el("button", "dde", on("click", dde)),
+		" ",
+		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"); }

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

@@ -0,0 +1,18 @@
+import { el, on } from "deka-dom-el";
+const paragraph= el("p", "See live-cycle events in console.",
+	el=> log({ type: "dde:created", detail: el }),
+	on.connected(log),
+	on.disconnected(log),
+	on.attributeChanged(log));
+
+document.body.append(
+	paragraph,
+	el("button", "Update attribute", on("click", ()=> paragraph.setAttribute("test", Math.random().toString()))),
+	" ",
+	el("button", "Remove", on("click", ()=> paragraph.remove()))
+);
+
+/** @param {Partial<CustomEvent>} event */
+function log({ type, detail }){
+	console.log({ _this: this, type, detail });
+}

docs_src/components/pageUtils.html.js

@@ -15,6 +15,18 @@ styles.scope(prevNext).css`
 }
 `;
 import { el } from "../../index.js";
+/**
+ * @param {Object} attrs
+ * @param {string} attrs.textContent
+ * @param {string} [attrs.id]
+ * */
+export function h3({ textContent, id }){
+	if(!id) id= "h-"+textContent.toLowerCase().replaceAll(/\s/g, "-").replaceAll(/[^a-z-]/g, "");
+	return el("h3", { id }).append(
+		el("a", { textContent: "§", href: "#"+id, tabIndex: -1 }),
+		" ", textContent
+	);
+}
 /**
  * @param {import("../types.d.ts").Info} page
  * */