jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2024-11-21 23:39:37 +01:00
Code Packages Releases Activity

🔤 ce wip

Browse Source
This commit is contained in:
Jan Andrle 2024-06-10 15:52:47 +02:00
parent a60c2dd053
commit 052362f26c
Signed by: jaandrle
GPG Key ID: B3A25AED155AFFAB
1 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,7 +32,17 @@ const references= {
custom_elements_tips: {
title: t`Ideas and tips from WebReflection`,
href: "https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4",
}
},
/** Shallow DOM on mdn */
mdn_shadow_dom_depth: {
title: t`MDN documentation page for Shadow DOM`,
href: "https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM",
},
/** Shallow DOM */
shadow_dom_depth: {
title: t`Everything you need to know about Shadow DOM (github repo praveenpuglia/shadow-dom-in-depth)`,
href: "https://github.com/praveenpuglia/shadow-dom-in-depth",
},
};
/** @param {import("./types.d.ts").PageAttrs} attrs */
export function page({ pkg, info }){
@ -84,6 +94,15 @@ export function page({ pkg, info }){
el(example, { src: fileURL("./components/examples/customElement/observedAttributes.js"), page_id }),
el(h3, t`Shadow DOM`),
el("p").append(...T`
Regarding to ${el("code", "this.attachShadow({ mode: 'open' })")} see quick overview
${el("a", { textContent: t`Using Shadow DOM`, ...references.mdn_shadow_dom_depth })}. An another source of
information can be ${el("a", { textContent: t`Shadow DOM in Depth`, ...references.shadow_dom_depth })}. To
sum up, there in basic three ways to render component body:
`),
el(mnemonic)
);
}