Allows custom counter styles (@counter-style rules) to be defined with shadow trees, and properly referenced within shadow trees or across shadow boundaries.

Motivation

Currently, if we want to use a custom counter style in shadow trees, the counter style must be defined in the global namespace (i.e., in the light DOM), which breaks encapsulation. This can be fixed if we allow shadow trees to define their own custom counter styles and handle name scoping and conflicts correctly.

Documentation

Specification

Specification link


Specification currently under development in a Working Group

Status in Chromium

Blink>CSS


Enabled by default (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owner

Intent to Prototype url

Intent to Prototype thread

Comments

This is part of the feature https://chromestatus.com/feature/5692693659254784. They were implemented together during prototyping. However, this feature was held back from shipping because the spec wasn't ready until a later CSSWG resolution https://github.com/w3c/csswg-drafts/issues/1995#issuecomment-848941922.

Search tags

css, counter, counter-style, shadow,

Last updated on 2021-11-13