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

xiaochengh · 2020-11-04T01:04:17Z

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 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)

The text was updated successfully, but these errors were encountered:

xiaochengh · 2020-12-01T22:46:39Z

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 · 2020-12-01T22:54:01Z

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

This patch adds a new structure CounterStyleMap to each tree scope. There is also one map for user rules, and one map to user agent rules. CounterStyleMap indexes all the counter styles defined in the tree scopes, and also has logic for: - Given a tree scope and a name, resolving the tree-scoped reference following proposal [1] - Resolve and update 'extends' and 'fallback' references after active style changes Note that we cannot share CounterStyleMap between tree scopes even if they have the same rule set. This is because the same rule may have its 'extends' and 'fallback' resolved differently when used in different tree scopes. The complicated parts are: - We must resolve references in parent scope before child scopes, but ScopedStyleResolver::AppendActiveStyleSheets() is not called in the tree order - We need to update references when active style changes. Moreover, an active style change in one tree scope may affect references in the child scopes, and it's hard to keep track which tree scopes are affected. So we end up updating all unconditionally - We need to detect cycles in 'extends' Therefore, the reference resolution and update is done for all tree scopes at the end of StyleEngine::UpdateActiveStyleSheets(). [1] w3c/csswg-drafts#5693 (comment) Bug: 687225 Change-Id: Ib907103438c5c996f6abfc81f4ff22fd932a827a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2574064 Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/master@{#835021}

tabatkins · 2021-05-13T23:17:03Z

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.

… shadow trees. #5693 #1995

fantasai · 2021-05-17T20:29:23Z

Agenda+ to review fix with the CSSWG.

css-meeting-bot · 2021-06-02T23:53:49Z

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

Now that the name scoping behavior has been specified in the way these tests assert [1], this patch moves them to WPT. [1] w3c/csswg-drafts#5693 Bug: 1225033 Change-Id: I3970ec8a1ee185ad32fcd1e7c57952d5513e6b8e

Now that the name scoping behavior has been specified in the way these tests assert [1], this patch moves them to WPT. [1] w3c/csswg-drafts#5693 Bug: 1225033 Change-Id: I3970ec8a1ee185ad32fcd1e7c57952d5513e6b8e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3000883 Auto-Submit: Xiaocheng Hu <xiaochengh@chromium.org> Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org> Reviewed-by: Chris Harrelson <chrishtr@chromium.org> Cr-Commit-Position: refs/heads/master@{#900782}

… tests to WPT, a=testonly Automatic update from web-platform-tests [@counter-style] Move shadow-DOM-related tests to WPT Now that the name scoping behavior has been specified in the way these tests assert [1], this patch moves them to WPT. [1] w3c/csswg-drafts#5693 Bug: 1225033 Change-Id: I3970ec8a1ee185ad32fcd1e7c57952d5513e6b8e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3000883 Auto-Submit: Xiaocheng Hu <xiaochengh@chromium.org> Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org> Reviewed-by: Chris Harrelson <chrishtr@chromium.org> Cr-Commit-Position: refs/heads/master@{#900782} -- wpt-commits: abbafb6d4eb22478494cb98d1f25f4ba5174b0bc wpt-pr: 29560

This patch adds a new structure CounterStyleMap to each tree scope. There is also one map for user rules, and one map to user agent rules. CounterStyleMap indexes all the counter styles defined in the tree scopes, and also has logic for: - Given a tree scope and a name, resolving the tree-scoped reference following proposal [1] - Resolve and update 'extends' and 'fallback' references after active style changes Note that we cannot share CounterStyleMap between tree scopes even if they have the same rule set. This is because the same rule may have its 'extends' and 'fallback' resolved differently when used in different tree scopes. The complicated parts are: - We must resolve references in parent scope before child scopes, but ScopedStyleResolver::AppendActiveStyleSheets() is not called in the tree order - We need to update references when active style changes. Moreover, an active style change in one tree scope may affect references in the child scopes, and it's hard to keep track which tree scopes are affected. So we end up updating all unconditionally - We need to detect cycles in 'extends' Therefore, the reference resolution and update is done for all tree scopes at the end of StyleEngine::UpdateActiveStyleSheets(). [1] w3c/csswg-drafts#5693 (comment) Bug: 687225 Change-Id: Ib907103438c5c996f6abfc81f4ff22fd932a827a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2574064 Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/master@{#835021} GitOrigin-RevId: 0976b66f60d21b57b45f06b3d2b3a2f71c378656

This patch adds some new tests for how @counter-style rules with shadow DOM. Since the CSSWG spec issue [1] is still open and the spec text hasn't been modified, the new tests are added into wpt_internal/. [1] w3c/csswg-drafts#5693 Bug: 687225 Change-Id: Ie801eb969d71feee47ed2d3b3480445cc9cd2527 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2691398 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org> Cr-Commit-Position: refs/heads/master@{#853634} GitOrigin-RevId: 0a02a52febf55f1fe89e8915dc2bfea26a9e3391

Now that the name scoping behavior has been specified in the way these tests assert [1], this patch moves them to WPT. [1] w3c/csswg-drafts#5693 Bug: 1225033 Change-Id: I3970ec8a1ee185ad32fcd1e7c57952d5513e6b8e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3000883 Auto-Submit: Xiaocheng Hu <xiaochengh@chromium.org> Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org> Reviewed-by: Chris Harrelson <chrishtr@chromium.org> Cr-Commit-Position: refs/heads/master@{#900782} NOKEYCHECK=True GitOrigin-RevId: 710c233f104db318e87684e85f53d4a1d2d694e3

fantasai added the css-counter-styles-3 Current Work label Nov 18, 2020

tabatkins added a commit that referenced this issue May 13, 2021

[css-scoping-1] Define that tree-scoped names inherit into descendant…

faaf3ca

… shadow trees. #5693 #1995

tabatkins mentioned this issue May 13, 2021

[css-scoping] Handling global name-defining constructs in shadow trees #1995

Closed

tabatkins added a commit that referenced this issue May 14, 2021

[css-counter-styles-3] Define that counter styles are tree-scoped. #5693

29a198d

tabatkins added Closed Accepted as Obvious Bugfix Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. labels May 14, 2021

fantasai added the Agenda+ label May 17, 2021

css-meeting-bot removed the Agenda+ label Jun 2, 2021

mozilla-apprentice mentioned this issue Jun 2, 2021

[css-counter-styles] Clarify how @counter-style name lookup works with shadow DOM mozilla/wg-decisions#555

Closed

fantasai closed this as completed Jun 3, 2021

chromium-wpt-export-bot mentioned this issue Jul 1, 2021

[@counter-style] Move shadow-DOM-related tests to WPT web-platform-tests/wpt#29560

Merged

wbamberg mentioned this issue Apr 18, 2022

feat(css): Add example of @counter-style and all of its descriptors mdn/interactive-examples#2089

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

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

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

Comments