🔤

docs/components/examples/elements/native-dom-create.js

@@ -8,12 +8,12 @@ button.disabled = true;
 const button2 = Object.assign(
 	document.createElement('button'),
 	{
-	textContent: "Click me",
+		textContent: "Click me",
-	className: "primary",
+		className: "primary",
-	disabled: true
+		disabled: true
 	}
 );
 
 // Add to DOM
-document.body.appendChild(button);
+document.body.append(button);
-document.body.appendChild(button2);
+document.body.append(button2);

docs/components/examples/elements/native-dom-tree.js

@@ -2,14 +2,14 @@
 const div = document.createElement('div');
 const h1 = document.createElement('h1');
 h1.textContent = 'Title';
-div.appendChild(h1);
+div.append(h1);
 
 const p = document.createElement('p');
 p.textContent = 'Paragraph';
-div.appendChild(p);
+div.append(p);
 
-// appendChild doesn't return parent
+// append doesn't return parent
 // so chaining is not possible
 
 // Add to DOM
-document.body.appendChild(div);
+document.body.append(div);

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

@@ -3,6 +3,7 @@ const paragraph= el("p", "See live-cycle events in console.",
 	el=> log({ type: "dde:created", detail: el }),
 	on.connected(log),
 	on.disconnected(log),
+);
 
 document.body.append(
 	paragraph,

docs/components/mnemonic/events-init.js

@@ -16,15 +16,16 @@ export function mnemonic(){
 			el("code", "dispatchEvent(<event>[, <options>])(element)"),
 			" — just ", el("code", "<element>.dispatchEvent(new Event(<event>[, <options>]))")
 		),
-		el("li").append(
-			el("code", "dispatchEvent(<event>, <element>)([<detail>])"),
-			" — just ", el("code", "<element>.dispatchEvent(new Event(<event>))"), " or ",
-			el("code", "<element>.dispatchEvent(new CustomEvent(<event>, { detail: <detail> }))")
-		),
 		el("li").append(
 			el("code", "dispatchEvent(<event>[, <options>])(<element>[, <detail>])"),
 			" — just ", el("code", "<element>.dispatchEvent(new Event(<event>[, <options>] ))"), " or ",
 			el("code", "<element>.dispatchEvent(new CustomEvent(<event>, { detail: <detail> }))")
 		),
+		el("li").append(
+			el("code", "dispatchEvent(<event>[, <options>], <host>)([<detail>])"),
+			" — just ", el("code", "<host>().dispatchEvent(new Event(<event>[, <options>]))"), " or ",
+			el("code", "<host>().dispatchEvent(new CustomEvent(<event>, { detail: <detail> }[, <options>] ))"),
+			" (see scopes section of docs)"
+		),
 	);
 }

docs/p02-elements.html.js

@@ -60,7 +60,7 @@ export function page({ pkg, info }){
 				el("li", t`Declarative element creation with intuitive property assignment`),
 				el("li", t`Chainable methods for natural DOM tree construction`),
 				el("li", t`Simplified component patterns for code reuse`),
-				el("li", t`Normalized property/attribute handling across browsers`),
+				el("li", t`Normalized declarative property/attribute handling across browsers`),
 				el("li", t`Smart element return values for cleaner code flow`)
 			)
 		),
@@ -95,7 +95,8 @@ export function page({ pkg, info }){
 		el("p").append(...T`
 			The ${el("code", "assign")} function is the heart of dd<el>'s element property handling. It is internally
 			used to assign properties using the ${el("code", "el")} function. ${el("code", "assign")} provides
-			intelligent assignment of both properties (IDL) and attributes:
+			intelligent assignment of both ${el("a", { textContent: "properties (IDL)", ...references.mdn_idl })}
+			and attributes:
 		`),
 		el("div", { class: "function-table" }).append(
 			el("dl").append(
@@ -131,7 +132,7 @@ export function page({ pkg, info }){
 		el(h3, t`Building DOM Trees with Chainable Methods`),
 		el("p").append(...T`
 			One of the most powerful features of dd<el> is its approach to building element trees.
-			Unlike the native DOM API which doesn't return the parent after appendChild(), dd<el>'s
+			Unlike the native DOM API which doesn't return the parent after append(), dd<el>'s
 			append() always returns the parent element:
 		`),
 		el("div", { class: "illustration" }).append(

docs/p03-events.html.js

@@ -36,7 +36,7 @@ const references= {
 	mdn_mutation: {
 		href: "https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver",
 	},
-	/** Readding the element to the DOM fix by Vue */
+	/** TODO Readding the element to the DOM fix by Vue */
 	vue_fix: {
 		title: t`Vue and Web Components, lifecycle implementation readding the element to the DOM`,
 		href: "https://vuejs.org/guide/extras/web-components.html#lifecycle",
@@ -117,7 +117,7 @@ export function page({ pkg, info }){
 			el("div", { className: "tab", "data-tab": "addon" }).append(
 				el("h4", t`Addon Approach`),
 				el(code, { src: fileURL("./components/examples/events/chain-event.js"), page_id }),
-				el("p", t`Uses the addon pattern, see above.`)
+				el("p", t`Uses the addon pattern (so adds the event listener to the element), see above.`)
 			)
 		),
 		el("p").append(...T`
@@ -156,7 +156,8 @@ export function page({ pkg, info }){
 			You can think of an Addon as an "oncreate" event handler.
 		`),
 		el("p").append(...T`
-			dd<el> provides three additional lifecycle events that correspond to custom element lifecycle callbacks:
+			dd<el> provides two additional lifecycle events that correspond to ${el("a", { textContent:
+				"custom element", ...references.mdn_customElements })} lifecycle callbacks:
 		`),
 		el("div", { className: "function-table" }).append(
 			el("dl").append(
@@ -180,7 +181,9 @@ export function page({ pkg, info }){
 		el("div", { className: "warning" }).append(
 			el("ul").append(
 				el("li").append(...T`
-					Always use ${el("code", "on.*")} functions, not ${el("code", "on('dde:*', ...)")}, for proper registration
+					Always use ${el("code", "on.*")} functions as library must ensure proper (MutationObserver)
+					registration, not ${el("code", "on('dde:*', ...)")}, even the native event system is used with event
+					names prefixed with ${el("code", "dde:")}.
 				`),
 				el("li").append(...T`
 					Use lifecycle events sparingly, as they require internal tracking