You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
anchor-scope is specified to limit the exposure of anchors to not go above the anchor-scope element. However, anchor-name are also tree scoped which means that an element that is exposed as a part and given an anchor-name that way is scoped to the tree scope of the stylesheet that gives it a name (outside of the shadow dom).
I wanted to clarify what happens if both of these features are in effect:
Here the #scoper element is scoping all the anchors to its subtree, but #anchor is exposed as a part and is styled in the outer tree scope and is given an anchor-name there. Is that a valid anchor in the outer (or inner) tree scope?
This should be well defined now. Only anchor queries from within the flat-tree subtree of #scoper can "see" --anchor. So it's not visible in the outer scope, except when the query comes from another ::part(), e.g.:
<style>
my-element::part(anchor) {
anchor-name: --anchor;
}
my-element::part(anchored) {
left: anchor(--anchor right);
}
</style><my-element><templateshadowrootmode="open"><divid="scoper" style="anchor-scope: all"><divid="anchor" part="anchor"></div><divid="anchored" part="anchor"></div><!-- Works --></div><!-- But not if part=anchor was here instead. --></template></my-element><!-- And certainly not from here. -->
(And also a similar case with a slotted element).
In the inner scope, --anchor is visible inside #scoper, but not outside it.
That's interesting. I suspect that may be a little unexpected for developers: using a web component that exposes an element as a part, but giving that part an anchor name and trying to anchor to it doesn't work because unbeknownst to the developer, the web component has an anchor-scope protecting the part
anchor-scope
is specified to limit the exposure of anchors to not go above theanchor-scope
element. However,anchor-name
are also tree scoped which means that an element that is exposed as a part and given ananchor-name
that way is scoped to the tree scope of the stylesheet that gives it a name (outside of the shadow dom).I wanted to clarify what happens if both of these features are in effect:
Here the
#scoper
element is scoping all the anchors to its subtree, but#anchor
is exposed as a part and is styled in the outer tree scope and is given ananchor-name
there. Is that a valid anchor in the outer (or inner) tree scope?/cc @andruud @tabatkins
The text was updated successfully, but these errors were encountered: