Add Shadow DOM examples (#245)

mdn · Jan 17, 2024 · 043f6a8 · 043f6a8
1 parent f070e91
commit 043f6a8
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 0 deletions.
diff --git a/shadow-dom/README.md b/shadow-dom/README.md
@@ -0,0 +1,4 @@
+# Shadow DOM
+
+- [Simple `<template shadowrootmode="open">` example](https://mdn.github.io/dom-examples/shadow-dom/shadowrootmode/simple.html)
+- [CSS scoping with `<template shadowrootmode="open">`](https://mdn.github.io/dom-examples/shadow-dom/shadowrootmode/scoping.html)
diff --git a/shadow-dom/shadowrootmode/scoping.html b/shadow-dom/shadowrootmode/scoping.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>CSS scoping in declarative shadow DOM</title>
+    <style>
+      body {
+        font-family: sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <p hidden>⛔ Your browser doesn't support <code>shadowrootmode</code> attribute yet.</p>
+    <article>
+      <style>
+        p {
+          padding: 8px;
+          background-color: wheat;
+        }
+      </style>
+      <p>I'm in the DOM.</p>
+    </article>
+    <article>
+      <template shadowrootmode="open">
+        <style>
+          p {
+            padding: 8px;
+            background-color: plum;
+          }
+        </style>
+        <p>I'm in the Shadow DOM.</p>
+      </template>
+    </article>
+
+    <script>
+      const isShadowRootModeSupported = HTMLTemplateElement.prototype.hasOwnProperty('shadowRootMode');
+
+      document.querySelector('p[hidden]').toggleAttribute('hidden', isShadowRootModeSupported);
+    </script>
+    <!--
+      Used in:
+      - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
+    -->
+  </body>
+</html>
diff --git a/shadow-dom/shadowrootmode/simple.html b/shadow-dom/shadowrootmode/simple.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Declarative shadow DOM</title>
+  </head>
+  <body>
+    <div id="host">
+      <template shadowrootmode="open">
+        <span>I'm in the shadow DOM</span>
+      </template>
+    </div>
+    <!--
+      Used in:
+      - https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM
+    -->
+  </body>
+</html>