From 68cb70ac27f5e24d519e028500ce1b890e5907e2 Mon Sep 17 00:00:00 2001
From: William Killerud <william.killerud@m10s.io>
Date: Thu, 2 Oct 2025 08:57:48 +0200
Subject: [PATCH 1/2] Add demo with a parent and child shadow tree

In preparation for supporting more of the spec
---
 public/anchor-shadow-child.css  |  5 +++
 public/anchor-shadow-parent.css |  4 +++
 shadow-root.html                | 58 ++++++++++++++++++++++++++++-----
 3 files changed, 58 insertions(+), 9 deletions(-)
 create mode 100644 public/anchor-shadow-child.css
 create mode 100644 public/anchor-shadow-parent.css

diff --git a/public/anchor-shadow-child.css b/public/anchor-shadow-child.css
new file mode 100644
index 0000000..ee24e9c
--- /dev/null
+++ b/public/anchor-shadow-child.css
@@ -0,0 +1,5 @@
+#child-target-positioning {
+  position: absolute;
+  right: anchor(--shadow-anchor-positioning right, 50px);
+  top: anchor(--shadow-anchor-positioning bottom);
+}
diff --git a/public/anchor-shadow-parent.css b/public/anchor-shadow-parent.css
new file mode 100644
index 0000000..60b5206
--- /dev/null
+++ b/public/anchor-shadow-parent.css
@@ -0,0 +1,4 @@
+#parent-anchor-positioning {
+  anchor-name: --shadow-anchor-positioning;
+}
+
diff --git a/shadow-root.html b/shadow-root.html
index a3e1942..e441c97 100644
--- a/shadow-root.html
+++ b/shadow-root.html
@@ -37,13 +37,14 @@
 
       if (!SUPPORTS_ANCHOR_POSITIONING) {
         btn.addEventListener('click', () => {
-          document
-            .querySelector('anchor-web-component')
-            .applyPolyfill()
-            .then(() => {
-              btn.innerText = 'Polyfill Applied';
-              btn.setAttribute('disabled', '');
-            });
+          Promise.all(
+            [...document.querySelectorAll('[data-polyfillable]')].map((e) =>
+              e.applyPolyfill(),
+            ),
+          ).then(() => {
+            btn.innerText = 'Polyfill Applied';
+            btn.setAttribute('disabled', '');
+          });
         });
       } else {
         btn.innerText = 'No Polyfill Needed';
@@ -53,13 +54,28 @@
         );
       }
 
-      class AnchorWebComponent extends HTMLElement {
+      class BaseWebComponent extends HTMLElement {
         /* This would typically be run in connectedCallback() */
         applyPolyfill() {
           return polyfill({ root: [this.shadowRoot] });
         }
       }
+
+      class AnchorWebComponent extends BaseWebComponent {}
       customElements.define('anchor-web-component', AnchorWebComponent);
+
+      class ParentComponent extends BaseWebComponent {}
+      customElements.define('parent-component', ParentComponent);
+
+      class ChildComponent extends BaseWebComponent {
+        connectedCallback() {
+          console.log({
+            shadowRoot: this.shadowRoot,
+            host: this.shadowRoot.host.parentNode.host.parentNode.parentNode,
+          });
+        }
+      }
+      customElements.define('child-component', ChildComponent);
     </script>
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <script src="https://unpkg.com/prismjs@v1.x/components/prism-core.min.js"></script>
@@ -182,7 +198,7 @@ <h2>
         Works if anchor and target are both inside the same shadow root
       </h2>
       <div class="demo-elements">
-        <anchor-web-component>
+        <anchor-web-component data-polyfillable>
           <template shadowrootmode="open">
             <link rel="stylesheet" href="/demo.css" />
             <link rel="stylesheet" href="/anchor-shadow-root.css" />
@@ -235,6 +251,30 @@ <h2>
 &lt;/script&gt;
 </code></pre>
     </section>
+    <section id="nested-shadow-roots" class="demo-item">
+      <h2>
+        <a href="#nested-shadow-roots" aria-hidden="true">🔗</a>
+        Child shadow root can anchor to parent shadow root
+      </h2>
+      <div class="demo-elements">
+        <parent-component data-polyfillable>
+          <template shadowrootmode="open">
+            <link rel="stylesheet" href="/demo.css" />
+            <link rel="stylesheet" href="/anchor-shadow-parent.css" />
+            <div style="position: relative">
+              <div id="shadow-anchor-positioning" class="anchor">Anchor</div>
+            </div>
+            <child-component data-polyfillable>
+              <template shadowrootmode="open">
+                <link rel="stylesheet" href="/demo.css" />
+                <link rel="stylesheet" href="/anchor-shadow-child.css" />
+                <div id="shadow-target-positioning" class="target">Target</div>
+              </template>
+            </child-component>
+          </template>
+        </parent-component>
+      </div>
+    </section>
     <section id="sponsor">
       <h2>Sponsor OddBird’s OSS Work</h2>
       <p>

From b45a5f89a4a192d79314ecfa22e50abae755fe92 Mon Sep 17 00:00:00 2001
From: William Killerud <william.killerud@m10s.io>
Date: Thu, 2 Oct 2025 11:41:52 +0200
Subject: [PATCH 2/2] Set up example for referencing anchor in parent tree

---
 public/anchor-shadow-child.css  |  2 +-
 public/anchor-shadow-parent.css |  1 -
 shadow-root.html                | 19 ++++++++++---------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/public/anchor-shadow-child.css b/public/anchor-shadow-child.css
index ee24e9c..6e1c7e2 100644
--- a/public/anchor-shadow-child.css
+++ b/public/anchor-shadow-child.css
@@ -1,5 +1,5 @@
 #child-target-positioning {
   position: absolute;
-  right: anchor(--shadow-anchor-positioning right, 50px);
+  right: anchor(--shadow-anchor-positioning right);
   top: anchor(--shadow-anchor-positioning bottom);
 }
diff --git a/public/anchor-shadow-parent.css b/public/anchor-shadow-parent.css
index 60b5206..68dabc6 100644
--- a/public/anchor-shadow-parent.css
+++ b/public/anchor-shadow-parent.css
@@ -1,4 +1,3 @@
 #parent-anchor-positioning {
   anchor-name: --shadow-anchor-positioning;
 }
-
diff --git a/shadow-root.html b/shadow-root.html
index e441c97..af65a06 100644
--- a/shadow-root.html
+++ b/shadow-root.html
@@ -261,16 +261,17 @@ <h2>
           <template shadowrootmode="open">
             <link rel="stylesheet" href="/demo.css" />
             <link rel="stylesheet" href="/anchor-shadow-parent.css" />
-            <div style="position: relative">
-              <div id="shadow-anchor-positioning" class="anchor">Anchor</div>
+            <div style="position: relative;">
+              <child-component data-polyfillable>
+                <template shadowrootmode="open">
+                  <link rel="stylesheet" href="/demo.css" />
+                  <link rel="stylesheet" href="/anchor-shadow-child.css" />
+                  <div id="child-target-positioning" class="target">Target</div>
+                </template>
+              </child-component>
+
+            <div id="parent-anchor-positioning" class="anchor">Anchor</div>
             </div>
-            <child-component data-polyfillable>
-              <template shadowrootmode="open">
-                <link rel="stylesheet" href="/demo.css" />
-                <link rel="stylesheet" href="/anchor-shadow-child.css" />
-                <div id="shadow-target-positioning" class="target">Target</div>
-              </template>
-            </child-component>
           </template>
         </parent-component>
       </div>