[css-counter-styles] Clarify how @counter-style name lookup works with shadow DOM

[xiaochengh]

1. 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

---

2. How do extends system and fallback descriptor 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)

[xiaochengh]

Here's a proposal based on CSS-SCOPING-1, and compatible with Firefox's behavior that a global @counter-style rule can be access within a shadow tree.

As specified in CSS-SCOPING-1:

• Each @counter-style rule defines a tree-scoped name
• Each counter style name reference defines a tree-scoped reference. This includes:
  • system: extends and fallback descriptors
  • list-style-type property
  • counter() and counters() functions in content property

To 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]

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".

[tabatkins]

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.

[fantasai]

Agenda+ to review fix with the CSSWG.

[css-meeting-bot]

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 dom

The 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