mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-07-11 16:32:13 +02:00
⚡ 🐛 finalizing WC + simulateSlots
This commit is contained in:
@ -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
41
docs_src/components/examples/customElement/simulateSlots.js
Normal 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")
|
||||
)
|
||||
));
|
||||
}
|
Reference in New Issue
Block a user