jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-07-01 20:32:13 +02:00
Code Packages Releases Activity

🔤 ce wip

Browse Source
This commit is contained in:
Jan Andrle
2024-06-07 16:14:15 +02:00
parent 55860b99eb
commit a60c2dd053
7 changed files with 200 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
docs_src/components/examples/customElement/observedAttributes.js Normal file
View File

@ -0,0 +1,42 @@
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
);

1
docs_src/p06-customElement.html.js
View File

@ -81,6 +81,7 @@ export function page({ pkg, info }){
and ${el("code", "observedAttributes")} (converts attributes to render function arguments —
${el("em", "default")}) or ${el("code", "S.observedAttributes")} (converts attributes to signals).
`),
el(example, { src: fileURL("./components/examples/customElement/observedAttributes.js"), page_id }),
el(mnemonic)