From 947591cf9f35737ed0e3ee29b8b27296056f08b8 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Thu, 7 Nov 2024 14:58:42 -0500
Subject: [PATCH] Add anchor-scope example

---
 index.html              | 49 +++++++++++++++++++++++++++++++++++++++++
 public/anchor-scope.css | 18 +++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 public/anchor-scope.css

diff --git a/index.html b/index.html
index 45f760d..8e5bd24 100644
--- a/index.html
+++ b/index.html
@@ -37,6 +37,7 @@
     <link rel="stylesheet" href="/anchor-absolute.css" />
     <link rel="stylesheet" href="/anchor-pseudo-element.css" />
     <link rel="stylesheet" href="/anchor-media-query.css" />
+    <link rel="stylesheet" href="/anchor-scope.css" />
     <style>
       #my-anchor-style-tag {
         anchor-name: --my-anchor-style-tag;
@@ -1211,6 +1212,54 @@ <h2>
     ],
   });
 &lt;/script&gt;</code></pre>
+    </section>
+    <section id="anchor-scope" class="demo-item">
+      <h2>
+        <a href="#anchor-scope" aria-hidden="true">🔗</a>
+        Scope an anchor name
+      </h2>
+      <div class="demo-elements">
+        <ul>
+          <li class="anchor">
+            <span>List item One</span><span class="arrow">▶</span>
+            <div class="target scoped-target">Target One</div>
+          </li>
+          <li class="anchor">
+            <span>List item Two</span><span class="arrow">▶</span>
+            <div class="target scoped-target">Target Two</div>
+          </li>
+          <li class="anchor">
+            <span>List item Three</span><span class="arrow">▶</span>
+            <div class="target scoped-target">Target Three</div>
+          </li>
+          <li class="anchor">
+            <span>List item Four</span><span class="arrow">▶</span>
+            <div class="target scoped-target">Target Four</div>
+          </li>
+          <li class="anchor">
+            <span>List item Five</span><span class="arrow">▶</span>
+            <div class="target scoped-target">Target Five</div>
+          </li>
+        </ul>
+      </div>
+      <p class="note">
+        With polyfill applied: Targets are positioned to the right of their
+        corresponding item's arrow.
+      </p>
+      <pre><code class="language-css">#anchor-scope li {
+  anchor-scope: --anchor-scope;
+}
+
+#anchor-scope .arrow{
+  anchor-name: --anchor-scope;
+}
+
+#anchor-scope .target {
+  position: absolute;
+  position-anchor: --anchor-scope;
+  left: anchor(right);
+  top: anchor(center);
+}</code></pre>
     </section>
     <section id="sponsor">
       <h2>Sponsor OddBird's OSS Work</h2>
diff --git a/public/anchor-scope.css b/public/anchor-scope.css
new file mode 100644
index 0000000..c72c60b
--- /dev/null
+++ b/public/anchor-scope.css
@@ -0,0 +1,18 @@
+#anchor-scope li {
+  display: flex;
+  justify-content: space-between;
+  anchor-scope: --anchor-scope;
+}
+
+#anchor-scope .arrow {
+  anchor-name: --anchor-scope;
+  block-size: 1em;
+  inline-size: 1em;
+}
+
+#anchor-scope .target {
+  position: absolute;
+  position-anchor: --anchor-scope;
+  left: anchor(right);
+  top: anchor(center);
+}