<!DOCTYPE html><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><metaname="description"content="Using custom elements in combinantion with DDE"><title>`deka-dom-el` — Web Components</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><metaname="author"content="Jan Andrle"><linktype="text/plain"rel="author"href="https://jaandrle.github.io/humans.txt"><metaname="generator"content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><metaname="twitter:card"content="summary_large_image"><metaname="twitter:url"content="https://github.com/jaandrle/deka-dom-el"><metaname="twitter:title"content="deka-dom-el"><metaname="twitter:description"content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><metaname="twitter:creator"content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><metaname="og:url"content="https://github.com/jaandrle/deka-dom-el"><metaname="og:title"content="deka-dom-el"><metaname="og:description"content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><metaname="og:creator"content="@jaandrle"><scriptsrc="https://cdn.jsdelivr.net/npm/shiki@0.9"defer=""></script><scripttype="module"src="code.js.js"></script><linkrel="stylesheet"href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="simplePage" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Web Components</h1><p>Using custom elements in combinantion with DDE</p></header><nav><ahref="https://github.com/jaandrle/deka-dom-el"><svgclass="icon"viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><pathd="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><ahref="./"title="Introducing a library.">1. Introduction</a><ahref="p02-elements"title="Basic concepts of elements modifications and creations.">2. Elements</a><ahref="p03-events"title="Using not only events in UI declaratively.">3. Events and Addons</a><ahref="p04-signals"title="Handling reactivity in UI via signals.">4. Signals and reactivity</a><ahref="p05-scopes"title="Organizing UI into components">5. Scopes and components</a><ahref="p06-customElement"title="Using custom elements in combinantion with DDE"class="current">6. Web Components</a></nav><main><h2>Using web components in combinantion with DDE</h2><p>The DDE library allows for use within <atitle="MDN documentation page for Web Components"href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components"><strong>Web Components</strong></a> for dom-tree generation. However, in order to be able to use signals (possibly mapping to registered <atitle="MDN documentation page for observedAttributes"href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#responding_to_attribute_changes"><code>observedAttributes</code></a>) and
</code></div><h3id="h-custom-elements-introduction"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><ahref="#h-custom-elements-introduction"tabindex="-1">#</a> Custom Elements Introduction</h3><p>To start with, let’s see how to use native Custom Elements. As starting point please read <atitle="MDN documentation page for Custom Elements"href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements"><strong>Using Custom Elements</strong> on MDN</a>. To sum up and for mnemonic see following code overview:</p><divclass="code"data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><codeclass="language-js">export class CustomHTMLElement extends HTMLElement{
</code></div><p>For more advanced use of Custom Elements, the summary <atitle="Ideas and tips from WebReflection"href="https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4"><strong>Handy Custom Elements' Patterns</strong></a> 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 (<code>el(CustomHTMLElement.tagName, { customAttribute: "new-value" });</code>).</p><divclass="notice"><!--<dde:mark type="component" name="mnemonic" host="parentElement" ssr/>--><h3id="h-mnemonic"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><ahref="#h-mnemonic"tabindex="-1">#</a> Mnemonic</h3><ul><li><code>customElementRender(<custom-element>, <render-function>[, <properties>])</code> — use function to render DOM structure for given <custom-element></li><li><code>customElementWithDDE(<custom-element>)</code> — register <custom-element> to DDE library, see also `lifecyclesToEvents`, can be also used as decorator</li><li><code>observedAttributes(<custom-element>)</code> — returns record of observed attributes (keys uses camelCase)</li><li><code>S.observedAttributes(<custom-element>)</code> — returns record of observed attributes (keys uses camelCase and values are signals)</li><li><code>lifecyclesToEvents(<class-declaration>)</code> — convert lifecycle methods to events, can be also used as decorator</li></ul></div><divclass="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><arel="prev"href="p05-scopes"title="Organizing UI into components"><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->Scopes and components (previous)</a><!--<dde:mark type="component" name="pageLink" host="this" ssr/>--></div></main></body></html>
