diff --git a/docs/components/examples/elements/native-dom-create.js b/docs/components/examples/elements/native-dom-create.js index 8b7affc..4ae7b45 100644 --- a/docs/components/examples/elements/native-dom-create.js +++ b/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", - className: "primary", - disabled: true + textContent: "Click me", + className: "primary", + disabled: true } ); // Add to DOM -document.body.appendChild(button); -document.body.appendChild(button2); \ No newline at end of file +document.body.append(button); +document.body.append(button2); diff --git a/docs/components/examples/elements/native-dom-tree.js b/docs/components/examples/elements/native-dom-tree.js index aad2e7b..84f67f3 100644 --- a/docs/components/examples/elements/native-dom-tree.js +++ b/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); \ No newline at end of file +document.body.append(div); diff --git a/docs/components/examples/events/live-cycle.js b/docs/components/examples/events/live-cycle.js index 726d490..6585635 100644 --- a/docs/components/examples/events/live-cycle.js +++ b/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, diff --git a/docs/components/mnemonic/events-init.js b/docs/components/mnemonic/events-init.js index 9b91d63..22ace4c 100644 --- a/docs/components/mnemonic/events-init.js +++ b/docs/components/mnemonic/events-init.js @@ -16,15 +16,16 @@ export function mnemonic(){ el("code", "dispatchEvent([, ])(element)"), " — just ", el("code", ".dispatchEvent(new Event([, ]))") ), - el("li").append( - el("code", "dispatchEvent(, )([])"), - " — just ", el("code", ".dispatchEvent(new Event())"), " or ", - el("code", ".dispatchEvent(new CustomEvent(, { detail: }))") - ), el("li").append( el("code", "dispatchEvent([, ])([, ])"), " — just ", el("code", ".dispatchEvent(new Event([, ] ))"), " or ", el("code", ".dispatchEvent(new CustomEvent(, { detail: }))") ), + el("li").append( + el("code", "dispatchEvent([, ], )([])"), + " — just ", el("code", "().dispatchEvent(new Event([, ]))"), " or ", + el("code", "().dispatchEvent(new CustomEvent(, { detail: }[, ] ))"), + " (see scopes section of docs)" + ), ); } diff --git a/docs/p02-elements.html.js b/docs/p02-elements.html.js index af854db..34d0e8e 100644 --- a/docs/p02-elements.html.js +++ b/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'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 is its approach to building element trees. - Unlike the native DOM API which doesn't return the parent after appendChild(), dd's + Unlike the native DOM API which doesn't return the parent after append(), dd's append() always returns the parent element: `), el("div", { class: "illustration" }).append( diff --git a/docs/p03-events.html.js b/docs/p03-events.html.js index 7f44ac5..eeb4aa9 100644 --- a/docs/p03-events.html.js +++ b/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 provides three additional lifecycle events that correspond to custom element lifecycle callbacks: + dd 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