Repository navigation
[css-counter-styles] Clarify how @counter-style name lookup works with shadow DOM #5693
Description
- How should @counter-style rules defined in shadow DOM work. The current spec totally ignores it and says
Defining a @counter-style makes it available to the entire document in which it is included.
The current behavior (available in Firefox only) is:
- @counter-style defined in the main document is available to the entire document
- @counter-style defined in shadow DOM is ignored (bug). This is due to [css-scoping] Handling global name-defining constructs in shadow trees #1995
The spec should probably be revised to match the proposal in #1995
- How do
extendssystem andfallbackdescriptor search for the correct rule with shadow DOM?
This is more complicated. If we have a @counter-style rule in a stylesheet that is reused by multiple shadow DOMs, where does it search for the rule to extend or fallback? Obviously we can't just search within the same stylesheet, while searching the entire document and ignoring scoping also seems wrong.
The proposal in #1995 doesn't work, either, because a @counter-style rule isn't associated with any tree scope when defined. And it may be reused by multiple tree scopes.
Note: The situation is similar to @Property. We currently don't allow @Property in shadow DOMs but it's likely to change (w3c/css-houdini-drafts#939)
Activity
xiaochengh commentedon Dec 1, 2020
Here's a proposal based on CSS-SCOPING-1, and compatible with Firefox's behavior that a global
@counter-stylerule can be access within a shadow tree.As specified in CSS-SCOPING-1:
@counter-stylerule defines a tree-scoped namesystem: extendsandfallbackdescriptorslist-style-typepropertycounter()andcounters()functions incontentpropertyTo dereference a tree-scoped reference, we first look for names within the same tree scope; If there's no match, we recursively walk up to the parent tree scope and search until a matching name is found.
Note that the current spec of CSS-SCOPING-1 only searches the same tree scope, which makes @counter-style defined in the main document inaccessible from shadow trees.
tabatkins commentedon Dec 1, 2020
Yeah, it should work exactly the same way as for @font-face, aka "not remotely defined right now, but I have a years-old proposal for fixing it that I need someone to sign off on implementing".
Implement tree-scoped @counter-style references
tabatkins commentedon May 13, 2021
The current spec in Scoping intentionally doesn't walk up the tree, to better increase encapsulation, but I suppose it makes sense that these refs can "inherit" down into shadows. I suspect it better matches the mishmash of behavior for scoped references browsers currently have, anyway; at least, I think "you can always use the stuff from the top-level doc" is pretty common among them.
I'll go adjust Scoping to match that, and then explicitly ref it here.
[css-scoping-1] Define that tree-scoped names inherit into descendant…
[css-counter-styles-3] Define that counter styles are tree-scoped. #5693
fantasai commentedon May 17, 2021
Agenda+ to review fix with the CSSWG.
css-meeting-bot commentedon Jun 2, 2021
The CSS Working Group just discussed
[css-counter-styles] Clarify how @counter-style name lookup works with shadow DOM, and agreed to the following:RESOLVED: Accept the PR linked in the issue defining how counter style scoping works with shadow domThe full IRC log of that discussion
<dael> Topic: [css-counter-styles] Clarify how @counter-style name lookup works with shadow DOM<dael> github: https://github.com//issues/5693
<dael> TabAtkins: We talked previous week about the small change to name defining constructs to work with scoping. This is a request for approval to edit counter styles so that it works with the scoping machinery. Define counter style in outer page you can reference it within shadow dom. If you define it within the same name it stays in the shadow and overrides
<dael> TabAtkins: If you define it in the outer, inherit into a shadow, and redefine you get what you think you should use. Nothing novel, but spec needed a change to hook into that and I wanted approval b/c it is normative
<dael> astearns: Prop: Accept the PR linked in the issue defining how counter style scoping works with shadow dom
<dael> astearns: Obj?
<dael> RESOLVED: Accept the PR linked in the issue defining how counter style scoping works with shadow dom
[@counter-style] Move shadow-DOM-related tests to WPT
[@counter-style] Move shadow-DOM-related tests to WPT
[@counter-style] Move shadow-DOM-related tests to WPT
[@counter-style] Move shadow-DOM-related tests to WPT
[@counter-style] Move shadow-DOM-related tests to WPT
Bug 1718903 [wpt PR 29560] - [@counter-style] Move shadow-DOM-related…
Bug 1718903 [wpt PR 29560] - [@counter-style] Move shadow-DOM-related…
Bug 1718903 [wpt PR 29560] - [@counter-style] Move shadow-DOM-related…
Bug 1718903 [wpt PR 29560] - [@counter-style] Move shadow-DOM-related…
Bug 1718903 [wpt PR 29560] - [@counter-style] Move shadow-DOM-related…
Bug 1718903 [wpt PR 29560] - [@counter-style] Move shadow-DOM-related…