mirror of
https://github.com/jaandrle/deka-dom-el
synced 2024-11-24 17:39:36 +01:00
42 lines
822 B
JavaScript
42 lines
822 B
JavaScript
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")
|
|
)
|
|
));
|
|
}
|