jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-07-11 16:32:13 +02:00
Code Packages Releases Activity

⚡ 🐛 finalizing WC + simulateSlots

Browse Source
This commit is contained in:
Jan Andrle
2024-11-07 10:17:54 +01:00
parent 969dfc5ee2
commit 8201c3dbbf
22 changed files with 2569 additions and 1755 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs_src/components/code.html.js
View File

@ -14,7 +14,8 @@ ${host}{
--shiki-token-punctuation: var(--code);
--shiki-token-link: #EE0000;
white-space: pre;
tab-size: 2;${""/* TODO: allow custom tab size?! */}
${""/* TODO: allow custom tab size?! */}
tab-size: 2;
overflow: scroll;
}
${host}[data-js=todo]{

15
docs_src/components/examples/customElement/shadowRoot.js
View File

@ -5,6 +5,9 @@ import {
} from "deka-dom-el";
function ddeComponent(){
return el().append(
el("style", `
.red{ color: firebrick; }
`),
el("p", { className: "red" }).append(
"Hello from ", el("slot", "Custom Element"), "!"
)
@ -49,12 +52,18 @@ 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"),
el("style", `
.red{ color: crimson; }
`),
);
console.log(A.tagName, "expect modifications");
document.body.querySelector(A.tagName).querySelector("p").textContent+= " (editable with JS)";
console.log(B.tagName, "expect modifications");
document.body.querySelector(B.tagName).shadowRoot.querySelector("p").textContent+= " (editable with JS)";
console.log(C.tagName, "expect error ↓");
document.body.querySelector(C.tagName).querySelector("p").textContent+= " (editable with JS)";

41
docs_src/components/examples/customElement/simulateSlots.js Normal file
View File

@ -0,0 +1,41 @@
import {
customElementRender,
customElementWithDDE,
el,
simulateSlots
} from "deka-dom-el";
export class HTMLCustomElement extends HTMLElement{
static tagName= "custom-slotting";
connectedCallback(){
const c= ()=> simulateSlots(this, ddeComponent());
customElementRender(this, this, c);
}
}
customElementWithDDE(HTMLCustomElement);
customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);
document.body.append(
el(HTMLCustomElement.tagName),
el(HTMLCustomElement.tagName).append(
"Slot"
),
el(ddeComponentSlot),
el(ddeComponentSlot).append(
"Slot"
),
);
function ddeComponent(){
return el().append(
el("p").append(
"Hello ", el("slot", "World")
)
);
}
function ddeComponentSlot(){
return simulateSlots(el().append(
el("p").append(
"Hello ", el("slot", "World")
)
));
}

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

@ -17,6 +17,12 @@ export function mnemonic(){
),
el("li").append(
el("code", "lifecyclesToEvents(<class-declaration>)"), " — convert lifecycle methods to events, can be also used as decorator",
)
),
el("li").append(
el("code", "simulateSlots(<class-instance>, <body>[, <mapper>])"), " — simulate slots for Custom Elements without shadow DOM",
),
el("li").append(
el("code", "simulateSlots(<dde-component>[, <mapper>])"), " — simulate slots for “dde”/functional components",
),
);
}