feat: data-shadow don't need a value anymore

BREAKING CHANGE: data-shadow is always open
infodusha · Jul 29, 2024 · 11a7e73 · 11a7e73
1 parent 07a5fdc
commit 11a7e73
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 7 deletions.
diff --git a/DOCS.md b/DOCS.md
@@ -41,9 +41,9 @@ That is the only required element. The tag can be used only once per file.
 
 Filename is used as a selector for the component. It must include dash `-` and be unique.
 
-You can use `<template data-shadow="closed">` to enable [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM#encapsulation_from_css).
+You can use `<template data-shadow>` to enable [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM#encapsulation_from_css).
 
-Can be `open`, `closed`. If not specified, no shadow DOM is used, but styles are still encapsulated.
+If not set, no shadow DOM is used, but styles are still encapsulated.
 
 ## Styles
 

diff --git a/example/app-footer.html b/example/app-footer.html
@@ -1,4 +1,4 @@
-<template data-shadow="closed">
+<template data-shadow>
 	<footer>Built by infodusha. Inspired by Vika.</footer>
 </template>
 

diff --git a/src/create-component.ts b/src/create-component.ts
@@ -93,10 +93,7 @@ export function createComponent(
 
 		#attach(content: DocumentFragment): void {
 			if (useShadow) {
-				const mode =
-					(template.getAttribute("data-shadow") as ShadowRootMode | "") ||
-					"open";
-				const shadowRoot = this.attachShadow({ mode });
+				const shadowRoot = this.attachShadow({ mode: "open" });
 				shadowRoot.appendChild(content);
 				this.#setShadowStyles(shadowRoot);
 			} else {