mirror of
https://github.com/jaandrle/deka-dom-el
synced 2024-11-23 09:09:38 +01:00
43 lines
1.1 KiB
JavaScript
43 lines
1.1 KiB
JavaScript
|
import {
|
||
|
|
customElementRender,
|
||
|
|
customElementWithDDE,
|
||
|
|
observedAttributes,
|
||
|
|
el, on, scope
|
||
|
|
} from "deka-dom-el";
|
||
|
|
import { S } from "deka-dom-el/signals";
|
||
|
|
export class HTMLCustomElement extends HTMLElement{
|
||
|
|
static tagName= "custom-element";
|
||
|
|
static observedAttributes= [ "attr" ];
|
||
|
|
connectedCallback(){
|
||
|
|
console.log(observedAttributes(this));
|
||
|
|
customElementRender(
|
||
|
|
this,
|
||
|
|
this.attachShadow({ mode: "open" }),
|
||
|
|
ddeComponent,
|
||
|
|
S.observedAttributes
|
||
|
|
);
|
||
|
|
}
|
||
|
|
set attr(value){ this.setAttribute("attr", value); }
|
||
|
|
get attr(){ return this.getAttribute("attr"); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/** @param {{ attr: ddeSignal<string, {}> }} props */
|
||
|
|
function ddeComponent({ attr }){
|
||
|
|
scope.host(
|
||
|
|
on.connected(e=> console.log(e.target.outerHTML)),
|
||
|
|
);
|
||
|
|
return el().append(
|
||
|
|
el("p", S(()=> `Hello from Custom Element with attribute '${attr()}'`))
|
||
|
|
);
|
||
|
|
}
|
||
|
|
customElementWithDDE(HTMLCustomElement);
|
||
|
|
customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);
|
||
|
|
|
||
|
|
document.body.append(
|
||
|
|
el(HTMLCustomElement.tagName, { attr: "Attribute" })
|
||
|
|
);
|
||
|
|
setTimeout(
|
||
|
|
()=> document.querySelector(HTMLCustomElement.tagName).setAttribute("attr", "New Value"),
|
||
|
|
3*750
|
||
|
|
);
|