jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2024-11-24 01:29:36 +01:00
Code Packages Releases Activity

🔤 ce wip

Browse Source
This commit is contained in:
Jan Andrle 2024-10-18 15:28:33 +02:00
parent e879b4b0a8
commit 969dfc5ee2
3 changed files with 122 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
docs/p06-customElement.html
View File

File diff suppressed because one or more lines are too long

60
docs_src/components/examples/customElement/shadowRoot.js Normal file
View File

@ -0,0 +1,60 @@
import {
el,
customElementRender,
customElementWithDDE,
} from "deka-dom-el";
function ddeComponent(){
return el().append(
el("p", { className: "red" }).append(
"Hello from ", el("slot", "Custom Element"), "!"
)
);
}
export class A extends HTMLElement{
static tagName= "custom-element-without";
connectedCallback(){
customElementRender(
this,
this,
ddeComponent
);
}
}
customElementWithDDE(A);
customElements.define(A.tagName, A);
export class B extends HTMLElement{
static tagName= "custom-element-open";
connectedCallback(){
customElementRender(
this,
this.attachShadow({ mode: "open" }),
ddeComponent
);
}
}
customElementWithDDE(B);
customElements.define(B.tagName, B);
export class C extends HTMLElement{
static tagName= "custom-element-closed";
connectedCallback(){
customElementRender(
this,
this.attachShadow({ mode: "closed" }),
ddeComponent
);
}
}
customElementWithDDE(C);
customElements.define(C.tagName, C);
document.body.append(
el("style", `
.red{ color: red; }
`),
el(A.tagName).append("Without shadowRoot"),
el("hr"),
el(B.tagName).append("Open shadowRoot"),
el("hr"),
el(C.tagName).append("Closed shadowRoot"),
);

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

@ -101,7 +101,7 @@ export function page({ pkg, info }){
information can be ${el("a", { textContent: t`Shadow DOM in Depth`, ...references.shadow_dom_depth })}. To
sum up, there in basic three ways to render component body:
`),
el(example, { src: fileURL("./components/examples/customElement/shadowRoot.js"), page_id }),
el(mnemonic)
);