Using web components in combinantion with DDE
The DDE library allows for use within Web Components for dom-tree generation. However, in order to be able to use signals (possibly mapping to registered observedAttributes) and additional functionality is (unfortunately) required to use helpers provided by the library.
// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js
+`deka-dom-el` — Web Components `deka-dom-el` — Web Components
Using custom elements in combinantion with DDE
Using web components in combinantion with DDE
The DDE library allows for use within Web Components for dom-tree generation. However, in order to be able to use signals (possibly mapping to registered observedAttributes) and additional functionality is (unfortunately) required to use helpers provided by the library.
// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js
import {
customElementRender,
customElementWithDDE,
@@ -10,8 +10,8 @@ S.observedAttributes;
// “internal” utils
import { lifecyclesToEvents } from "deka-dom-el";
-# Custom Elements Introduction
To start with, let’s see how to use native Custom Elements. As starting point please read Using Custom Elements on MDN. To sum up and for mnemonic see following code overview:
export class CustomHTMLElement extends HTMLElement{
- static tagName= "custom-element"; // just suggestion, we can use `el(CustomHTMLElement.tagName)`
+# Custom Elements Introduction
To start with, let’s see how to use native Custom Elements. As starting point please read Using Custom Elements on MDN. To sum up and for mnemonic see following code overview:
export class HTMLCustomElement extends HTMLElement{
+ static tagName= "custom-element"; // just suggestion, we can use `el(HTMLCustomElement.tagName)`
static observedAttributes= [ "custom-attribute" ];
constructor(){
super();
@@ -30,5 +30,55 @@ import { lifecyclesToEvents } from "deka-dom-el";
get customAttribute(){ return this.getAttribute("custom-attribute"); }
set customAttribute(value){ this.setAttribute("custom-attribute", value); }
}
-customElements.define(CustomHTMLElement.tagName, CustomHTMLElement);
-For more advanced use of Custom Elements, the summary 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(CustomHTMLElement.tagName, { customAttribute: "new-value" });).
# Mnemonic
customElementRender(<custom-element>, <render-function>[, <properties>]) — use function to render DOM structure for given <custom-element>customElementWithDDE(<custom-element>) — register <custom-element> to DDE library, see also `lifecyclesToEvents`, can be also used as decoratorobservedAttributes(<custom-element>) — returns record of observed attributes (keys uses camelCase)S.observedAttributes(<custom-element>) — returns record of observed attributes (keys uses camelCase and values are signals)lifecyclesToEvents(<class-declaration>) — convert lifecycle methods to events, can be also used as decorator
For more advanced use of Custom Elements, the summary 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(HTMLCustomElement.tagName, { customAttribute: "new-value" });).
Also see the Life Cycle Events sections, very similarly we would like to use DDE events. To do it, the library provides function customElementWithDDE…
import { customElementWithDDE, el, on } from "./esm-with-signals.js";
+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,
+);
+Custom Elements with DDE
import {
+ customElementRender,
+ customElementWithDDE,
+} from "./esm-with-signals.js";
+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 "./esm-with-signals.js";
+function ddeComponent({ attr }){
+ scope.host(
+ on.connected(e=> console.log(this.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" })
+);
+# Mnemonic
customElementRender(<custom-element>, <render-function>[, <properties>])— use function to render DOM structure for given <custom-element>customElementWithDDE(<custom-element>)— register <custom-element> to DDE library, see also `lifecyclesToEvents`, can be also used as decoratorobservedAttributes(<custom-element>)— returns record of observed attributes (keys uses camelCase)S.observedAttributes(<custom-element>)— returns record of observed attributes (keys uses camelCase and values are signals)lifecyclesToEvents(<class-declaration>)— convert lifecycle methods to events, can be also used as decorator