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

🔤 Web Components (WIP)

Browse Source
This commit is contained in:
Jan Andrle
2024-06-05 16:20:12 +02:00
parent 5299a0329c
commit 528a865d79
5 changed files with 119 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs_src/components/examples/customElement/customElementWithDDE.js Normal file
View File

@ -0,0 +1,17 @@
import { customElementWithDDE, el, on } from "deka-dom-el";
export class HTMLCustomElement extends HTMLElement{
static tagName= "custom-element";
connectedCallback(){
this.append(
el("p", "Hello from custom element!")
);
}
}
customElementWithDDE(HTMLCustomElement);
customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);
const instance= el(HTMLCustomElement.tagName);
on.connected(e=> console.log("Element connected to the DOM:", e))(instance);
document.body.append(
instance,
);

33
docs_src/components/examples/customElement/dde.js Normal file
View File

@ -0,0 +1,33 @@
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" })
);

6
docs_src/components/examples/customElement/native-basic.js
View File

@ -1,5 +1,5 @@
export class CustomHTMLElement extends HTMLElement{
static tagName= "custom-element"; // just suggestion, we can use `el(CustomHTMLElement.tagName)`
export class HTMLCustomElement extends HTMLElement{
static tagName= "custom-element"; // just suggestion, we can use `el(HTMLCustomElement.tagName)`
static observedAttributes= [ "custom-attribute" ];
constructor(){
super();
@ -18,4 +18,4 @@ export class CustomHTMLElement extends HTMLElement{
get customAttribute(){ return this.getAttribute("custom-attribute"); }
set customAttribute(value){ this.setAttribute("custom-attribute", value); }
}
customElements.define(CustomHTMLElement.tagName, CustomHTMLElement);
customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);