🎉 docs/p05-scopes

docs_src/components/examples/scopes/class-component.js

@@ -0,0 +1,41 @@
+import { chainableAppend, el, scope } from "deka-dom-el";
+class Test {
+	constructor(params){
+		this._params= params;
+	}
+	render(){
+		return el("div").append(
+			this._params.textContent
+		);
+	}
+}
+document.body.append(
+	elClass(Test, { textContent: "Hello World" })
+);
+
+function elClass(c, props, ...addons){
+	let element, element_host;
+	scope.push({
+		scope: c, //just informative purposes
+		host: (...c)=> c.length
+		? (!element
+			? addons.unshift(...c)
+			: c.forEach(c=> c(element_host)), undefined)
+		: element_host
+	});
+	const C= new c(props);
+	element= C.render();
+	const is_fragment= el instanceof DocumentFragment;
+	const el_mark= el.mark({ //this creates html comment `<dde:mark …/>`
+		type: "class-component",
+		name: C.name,
+		host: is_fragment ? "this" : "parentElement",
+	});
+	element.prepend(el_mark);
+	if(is_fragment) element_host= el_mark;
+	
+	chainableAppend(element);
+	addons.forEach(c=> c(element_host));
+	scope.pop();
+	return element;
+}

docs_src/components/examples/scopes/intro.js

@@ -0,0 +1,3 @@
+// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js
+import { scope, el, on } from "deka-dom-el";
+/** @type {ddeElementAddon} */

docs_src/components/examples/scopes/scopes-and-hosts.js

@@ -0,0 +1,33 @@
+import { el, on, scope } from "deka-dom-el";
+const { host }= scope;
+host(
+	element=> console.log(
+		"This represents Addon/oninit for root",
+		element.outerHTML
+	)
+);
+console.log(
+	"This represents the reference to the host element of root",
+	host().outerHTML
+);
+document.body.append(
+	el(component)
+);
+function component(){
+	const { host }= scope;
+	host(
+		element=> console.log(
+			"This represents Addon/oninit for the component",
+			element.outerHTML
+		)
+	);
+	const onclick= on("click", function(ev){
+		console.log(
+			"This represents the reference to the host element of the component",
+			host().outerHTML
+		);
+	})
+	return el("div", null, onclick).append(
+		el("strong", "Component")
+	);
+}