Add scoped custom element registry example

.github/workflows/agentscan.yml

@@ -0,0 +1,55 @@
+name: AgentScan
+
+on:
+  # Do NOT add actions/checkout to this workflow: pull_request_target runs
+  # with write permissions, so checking out PR code would allow a malicious
+  # PR to run arbitrary code with access to the token.
+  # Only `opened` (not `reopened`): a flagged PR/issue that gets reopened
+  # stays open for manual review, as the flag messages promise.
+  # To trigger a scan manually, add the `agentscan:scan` label to any PR
+  # or issue (remove and re-add it to re-scan).
+  pull_request_target:
+    types:
+      - opened
+      - labeled
+  issues:
+    types:
+      - opened
+      - labeled
+
+concurrency:
+  group: agentscan-${{ github.event.pull_request.number || github.event.issue.number }}
+  cancel-in-progress: true
+
+jobs:
+  agentscan:
+    # On `labeled` events, only run for the manual-trigger label (the scan
+    # itself adds `agentscan:*` labels, which must not re-trigger it).
+    if: github.event.action != 'labeled' || github.event.label.name == 'agentscan:scan'
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+      issues: write
+      contents: read
+    steps:
+      - name: AgentScan
+        uses: MatteoGabriele/agentscan-action@e02ef270c024bfad3541b2a71619c3c9f20b3312 # v2.2.0
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          scan-issues: true
+          auto-close: true
+          trusted-author-associations: '["owner", "member", "collaborator"]'
+          # Only `automation` and community-flagged accounts are auto-closed
+          # (the action's default); `mixed` is labeled and left open.
+          message-mixed: |
+            This was flagged as potentially not having a human behind it.
+            If this was flagged in error, we apologize.
+            A maintainer will review it manually.
+          message-automation: |
+            This was flagged as potentially not having a human behind it, and so it was closed.
+            If this was flagged in error, we apologize.
+            Please reopen it and we will manually review it.
+          message-community-flagged: |
+            This was flagged as potentially not having a human behind it, and so it was closed.
+            If this was flagged in error, we apologize.
+            Please reopen it and we will manually review it.

README.md

@@ -258,6 +258,26 @@ following features:
       containing block. To work around this, the polyfill strips any non-`auto`
       inset from the target (setting `inset: auto`) and re-applies it as padding
       on the wrapper, so the wrapper continues to drive positioning.
+    - Moving the target into the wrapper disconnects and reconnects it. If the
+      target is a custom element, its `connectedCallback` therefore runs more
+      than once, and any setup that can only happen once must be guarded — for
+      example, calling `attachShadow()` a second time throws. This applies to
+      any custom element the polyfill positions with `position-area`, including
+      a host positioned by a `position-area` in its own `:host` rule:
+
+      ```js
+      class MyElement extends HTMLElement {
+        connectedCallback() {
+          if (this.shadowRoot) return;
+          this.attachShadow({ mode: 'open' });
+          // ...
+        }
+      }
+      ```
+
+      Setting [`positionAreaContainingBlock`](#positionareacontainingblock) to
+      `false` (or `'auto'`, for targets that don't need the wrapper) avoids the
+      wrapper, and with it the reconnection.
   - When the wrapper is not added, styles that resolve against the containing
     block — percentage sizes, `auto` or percentage margins, percentage padding,
     or `stretch`/`anchor-center` self-alignment — will not match native

position-area.html

@@ -183,6 +183,29 @@ <h2>
       </div>
     </section>
 
+    <section class="position-area-demo-item" id="inline-shifted">
+      <h2>
+        <a href="#inline-shifted" aria-hidden="true">🔗</a>
+        <code>span-left top, padding set inline ✅</code>
+      </h2>
+      <div style="position: relative" class="demo-elements">
+        <div class="anchor">Anchor</div>
+        <div class="target inline-shifted" style="padding-right: 50%">
+          Target with longer content
+        </div>
+      </div>
+      <p>
+        The same as the demo above, except that
+        <code>padding-right: 50%</code> is an inline style rather than a
+        stylesheet rule. Inline styles are shifted into custom properties like
+        the rest of the CSS, so <a href="?auto"><code>auto</code> mode</a> can
+        still see the percentage padding and wraps the target. Without that
+        shift the padding reads back as empty, the target is positioned
+        directly, and the padding resolves against the original containing block
+        instead of the <code>position-area</code> cell.
+      </p>
+    </section>
+
     <section class="position-area-demo-item" id="nested-alignment">
       <h2>
         <a href="#nested-alignment" aria-hidden="true">🔗</a>

public/position-area-page.css

@@ -67,6 +67,12 @@
   position-area: span-left top;
 }
 
+/* Same as `.spanleft-top`, but the containing-block-dependent padding is set
+ * as an inline style on the target instead. */
+.target.inline-shifted {
+  position-area: span-left top;
+}
+
 .target.spanall-left {
   position-area: span-all left;
 }