mirror of
https://github.com/jaandrle/deka-dom-el
synced 2024-11-24 09:29:37 +01:00
34 lines
856 B
JavaScript
34 lines
856 B
JavaScript
|
import {
|
||
|
|
customElementRender,
|
||
|
|
customElementWithDDE,
|
||
|
|
} from "deka-dom-el";
|
||
|
|
export class HTMLCustomElement extends HTMLElement{
|
||
|
|
static tagName= "custom-element";
|
||
|
|
static observedAttributes= [ "attr" ];
|
||
|
|
connectedCallback(){
|
||
|
|
customElementRender(
|
||
|
|
this,
|
||
|
|
this.attachShadow({ mode: "open" }),
|
||
|
|
ddeComponent
|
||
|
|
);
|
||
|
|
}
|
||
|
|
set attr(value){ this.setAttribute("attr", value); }
|
||
|
|
get attr(){ return this.getAttribute("attr"); }
|
||
|
|
}
|
||
|
|
|
||
|
|
import { el, on, scope } from "deka-dom-el";
|
||
|
|
function ddeComponent({ attr }){
|
||
|
|
scope.host(
|
||
|
|
on.connected(e=> console.log(e.target.outerHTML)),
|
||
|
|
);
|
||
|
|
return el().append(
|
||
|
|
el("p", `Hello from Custom Element with attribute '${attr}'`)
|
||
|
|
);
|
||
|
|
}
|
||
|
|
customElementWithDDE(HTMLCustomElement);
|
||
|
|
customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);
|
||
|
|
|
||
|
|
document.body.append(
|
||
|
|
el(HTMLCustomElement.tagName, { attr: "Attribute" })
|
||
|
|
);
|