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

🔤 Web Components WIP

Browse Source
This commit is contained in:
Jan Andrle
2024-06-04 16:00:37 +02:00
parent f8646f08a7
commit 83ade00bf0
3 changed files with 27 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
class CustomHTMLElement extends HTMLElement{
export class CustomHTMLElement extends HTMLElement{
static tagName= "custom-element"; // just suggestion, we can use `el(CustomHTMLElement.tagName)`
static observedAttributes= [ "custom-attribute" ];
constructor(){

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

@ -1,6 +1,6 @@
import { T, t } from "./utils/index.js";
export const info= {
title: t`Custom elements`,
title: t`Web Components`,
description: t`Using custom elements in combinantion with DDE`,
};
@ -13,13 +13,19 @@ import { code } from "./components/code.html.js";
/** @param {string} url */
const fileURL= url=> new URL(url, import.meta.url);
const references= {
/** Custom Elements on MDN */
custom_elements: {
mdn_web_components: { /** Web Components on MDN */
title: t`MDN documentation page for Web Components`,
href: "https://developer.mozilla.org/en-US/docs/Web/API/Web_components",
},
mdn_observedAttributes: { /** observedAttributes on MDN */
title: t`MDN documentation page for observedAttributes`,
href: "https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#responding_to_attribute_changes",
},
mdn_custom_elements: { /** Custom Elements on MDN */
title: t`MDN documentation page for Custom Elements`,
href: "https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements",
},
/** Custom Elements tips from WebReflection */
custom_elements_tips: {
custom_elements_tips: { /** Custom Elements tips from WebReflection */
title: t`Ideas and tips from WebReflection`,
href: "https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4",
}
@ -28,18 +34,27 @@ const references= {
export function page({ pkg, info }){
const page_id= info.id;
return el(simplePage, { info, pkg }).append(
el("h2", t`Using custom elements in combinantion with DDE`),
el("h2", t`Using web components in combinantion with DDE`),
el("p").append(...T`
The DDE library allows for use within ${el("a", references.mdn_web_components).append( el("strong", "Web Components") )}
for dom-tree generation. However, in order to be able to use signals (possibly mapping to registered
${el("a", references.mdn_observedAttributes).append( el("code", "observedAttributes") )}) and additional
functionality is (unfortunately) required to use helpers provided by the library.
`),
el(code, { src: fileURL("./components/examples/customElement/intro.js"), page_id }),
el(h3, t`Custom Elements Introduction`),
el("p").append(...T`
${el("a", { textContent: t`Using custom elements`, ...references.custom_elements })}
To start with, let’s see how to use native Custom Elements. As starting point please read
${el("a", references.mdn_custom_elements).append( el("strong", "Using Custom Elements"), " on MDN" )}.
To sum up and for mnemonic see following code overview:
`),
el(code, { src: fileURL("./components/examples/customElement/native-basic.js"), page_id }),
el("p").append(...T`
${el("a", { textContent: t`Handy Custom Elements' Patterns`, ...references.custom_elements_tips })}
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\" });")}).
`),
el(mnemonic)