mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-04-02 20:15:53 +02:00
Jan Andrle
25d475ec04
* :tap: removed on.attributeChanged and static observedAttributes * ⚡ import optimalization * ⚡ scope.signal * 🔤 🐛 * ⚡ 🐛 registerReactivity and types * 🔤 * ⚡ * 🔤 * 🐛 Node in enviroment * ⚡ todos * ⚡ * ⚡ 🔤 * ⚡ lint * ⚡ memo * 🔤 🐛 memo * ⚡ 🔤 todomvc * 🐛 types * 🔤 p08 signal factory * 🔤 ⚡ types * ⚡ 🔤 lint * 🔤 * 🔤 * 🔤 * 🔤 * 📺
40 lines
1.1 KiB
JavaScript
40 lines
1.1 KiB
JavaScript
import {
|
|
customElementRender,
|
|
customElementWithDDE,
|
|
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(){
|
|
customElementRender(
|
|
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(( /** @type {HTMLParagraphElement} */ (e.target)).outerHTML)),
|
|
);
|
|
return el().append(
|
|
el("p", S(()=> `Hello from Custom Element with attribute '${attr.get()}'`))
|
|
);
|
|
}
|
|
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
|
|
);
|