jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-11-03 22:59:16 +01: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

60
docs/p06-customElement.html
View File

File diff suppressed because one or more lines are too long

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);

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

@@ -58,8 +58,18 @@ export function page({ pkg, info }){
For more advanced use of Custom Elements, the summary ${el("a", references.custom_elements_tips)
.append( el("strong", t`Handy Custom Elements' Patterns`) )} may be useful. Especially pay attention to
linking HTML attributes and defining setters/getters, this is very helpful to use in combination with
the library (${el("code", "el(CustomHTMLElement.tagName, { customAttribute: \"new-value\" });")}).
the library (${el("code", "el(HTMLCustomElement.tagName, { customAttribute: \"new-value\" });")}).
`),
el("p").append(...T`
Also see the Life Cycle Events sections, very similarly we would like to use
${el("a", { textContent: t`DDE events`, href: "./p03-events.html", title: t`See events part of the library documentation` })}.
To do it, the library provides function ${el("code", "customElementWithDDE")}…
`),
el(example, { src: fileURL("./components/examples/customElement/customElementWithDDE.js"), page_id }),
el("h3", t`Custom Elements with DDE`),
el(example, { src: fileURL("./components/examples/customElement/dde.js"), page_id }),
el(mnemonic)
);