jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2024-11-21 23:39:37 +01:00
Code Packages Releases Activity

⚡ ce wip

Browse Source
This commit is contained in:
Jan Andrle 2024-06-07 10:04:34 +02:00
parent 0bc0e0c64d
commit a5efbd236c
Signed by: jaandrle
GPG Key ID: B3A25AED155AFFAB
4 changed files with 27 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/p06-customElement.html
View File

File diff suppressed because one or more lines are too long

8
docs_src/components/examples/customElement/customElementWithDDE.js
View File

@ -11,7 +11,13 @@ customElementWithDDE(HTMLCustomElement);
customElements.define(HTMLCustomElement.tagName, HTMLCustomElement); customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);
const instance= el(HTMLCustomElement.tagName); const instance= el(HTMLCustomElement.tagName);
on.connected(e=> console.log("Element connected to the DOM:", e))(instance); on.connected( // preffered
e=> console.log("Element connected to the DOM (v1):", e)
)(instance);
instance.addEventListener(
"dde:connected",
e=> console.log("Element connected to the DOM (v2):", e)
);
document.body.append( document.body.append(
instance, instance,
); );

2
docs_src/components/mnemonic/customElement-init.js
View File

@ -4,7 +4,7 @@ import { mnemonicUl } from "../mnemonicUl.html.js";
export function mnemonic(){ export function mnemonic(){
return mnemonicUl().append( return mnemonicUl().append(
el("li").append( el("li").append(
el("code", "customElementRender(<custom-element>, <render-function>[, <properties>])"), " — use function to render DOM structure for given <custom-element>", el("code", "customElementRender(<custom-element>, <connect-target>, <render-function>[, <properties>])"), " — use function to render DOM structure for given <custom-element>",
), ),
el("li").append( el("li").append(
el("code", "customElementWithDDE(<custom-element>)"), " — register <custom-element> to DDE library, see also `lifecyclesToEvents`, can be also used as decorator", el("code", "customElementWithDDE(<custom-element>)"), " — register <custom-element> to DDE library, see also `lifecyclesToEvents`, can be also used as decorator",

9
docs_src/p06-customElement.html.js
View File

@ -68,7 +68,16 @@ export function page({ pkg, info }){
el(example, { src: fileURL("./components/examples/customElement/customElementWithDDE.js"), page_id }), el(example, { src: fileURL("./components/examples/customElement/customElementWithDDE.js"), page_id }),
el("h3", t`Custom Elements with DDE`), el("h3", t`Custom Elements with DDE`),
el("p").append(...T`
The ${el("code", "customElementWithDDE")} function is only (small) part of the inregration of the library.
More important for coexistence is render component function as a body of the Custom Element. For that, you
can use ${el("code", "customElementRender")} with arguments instance reference, target for connection,
render function and optional properties (will be passed to the render function) see later…
`),
el(example, { src: fileURL("./components/examples/customElement/dde.js"), page_id }), el(example, { src: fileURL("./components/examples/customElement/dde.js"), page_id }),
el("p").append(...T`
…
`),
el(mnemonic) el(mnemonic)