← Back to release summary

CSS @counter-style rules in shadow trees

Category
CSS
Type
No developer-visible change
Status
Enabled by default (Chrome 95)
Intent stage
Shipped

Summary

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.

Standards & signals

Docs: https://bit.ly/2Gm1oMC

Explainers: https://drafts.csswg.org/css-scoping/#example-f1503361 https://drafts.csswg.org/css-scoping/#example-ee72cb37 (While the examples use @font-face, @counter-style works in the same way)

View on chromestatus.com