[csswg-drafts] [css-anchor-position-1] Allow anchor references to match names in outer tree scopes (#9408)

xiaochengh has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-anchor-position-1] Allow anchor references to match names in outer tree scopes ==
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:

```html
<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 https://github.com/w3c/csswg-drafts/issues/7916#issuecomment-1287436800; now we have use cases)



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9408 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 26 September 2023 00:44:53 UTC