Anchor names and references are both tree scoped.

Currently, we only allow exact matches. In other words, anchor names can only be referenced in tree scopes where they are defined.

Proposal: allow anchor references in inner tree scopes to match names defined in outer tree scopes (like how we match at-rule names).

Reason:

The current way it's matched can be problematic according to feedback (@e111077), when we want elements in an inner tree scope to anchor to external anchors. For example:

<div style="anchor-name: --anchor-1"></div>

<custom-element>
  #shadow-root
    <div class="anchored"></div>
    <style>
      /* Try to anchor the element against --anchor-1 but can't */
      .anchored { inset-block-start: anchor(??? top); }
    </style>
</custom-element>

Currently the only proper way to anchor the .anchored element against --anchor-1 is to use a ::part selector in the outer tree scope. And this won't work if .anchored is further nested in another shadow tree, because we don't allow ::part selectors to chain.

If we allow inner tree scope's references to match outer tree scope's definitions, then we can simply put anchor(--my-anchor-1 top) in the inner tree scope's style sheets, regardless of how deep the inner scope is.

(In retrospect, we made anchor name use exact tree scope matching because we didn't know about use cases and wanted to keep implementation simple, see #7916 (comment); now we have use cases)