CSS Anchor Positioning: Allow shadow trees elements to reference anchor names defined in “higher” trees.

Description

Description

Interop 2026 already covers CSS Anchor Positioning.

For Interop 2027, this is quite a specific ask but it would be great to have the ability for shadow elements to reference anchor names defined in higher trees implemented across all browser engines reducing the need for ::part().

Currently no browsers ship this behaviour despite it being part of the specification. It would drastically reduce some of the current friction.

CSS Anchor Positioning §2.1:

Note: Positioned elements in shadow trees can reference anchor names defined in “higher” trees. Currently, they cannot reference anchor names defined in “lower” shadow trees, though.

  <style>
    #host {
      anchor-name: --higher-anchor;
      background: lightgray;
      block-size: 100px;
      inline-size: 200px;
      margin: 50px;
    }
  </style>

  <div id="host">
    <template shadowrootmode="open">
      <style>
        #anchored {
          background: green;
          block-size: 50px;
          inline-size: 50px;
          inset-block-start: anchor(--higher-anchor start, 37px);
          inset-inline-start: anchor(--higher-anchor end, 37px);
          position: absolute;
        }
      </style>
      <div id="anchored"></div>
    </template>
  </div>

Specification

W3C

web-feature

No response

Test Links

https://wpt.fyi/results/css/css-anchor-position/anchor-name-shadow-higher-tree.html?label=experimental&label=master&aligned

Additional Signals

• https://issues.chromium.org/issues/460252330
• https://github.com/w3c/csswg-drafts/issues/9408
• https://bugs.webkit.org/show_bug.cgi?id=322822
• https://bugzilla.mozilla.org/show_bug.cgi?id=2067343

Spec:

• https://www.w3.org/TR/css-anchor-position-1/#name

Start with CSS Anchor Positioning §2.1 and the linked WPT result for anchor-name-shadow-higher-tree.html. Compare behavior across browser engines and follow the linked Chromium, WebKit, and Mozilla issues. Done means shadow-tree elements can reference anchor names in higher trees consistently across the engines covered by Interop.