Skip to content

[css-cascade-5] Clarify the scope of layers#13690

Open
cdoublev wants to merge 2 commits intow3c:mainfrom
cdoublev:patch-13
Open

[css-cascade-5] Clarify the scope of layers#13690
cdoublev wants to merge 2 commits intow3c:mainfrom
cdoublev:patch-13

Conversation

@cdoublev
Copy link
Copy Markdown
Collaborator

@cdoublev cdoublev commented Mar 20, 2026

I.e. the scope is origin and context, as noted before the updated text:

Declarations within each origin and context can be explicitly assigned to a cascade layer.

In my opinion, an example would help to better capture what this means:

Given the following markup:

<style>
  @layer one { p::after { content: 'one wins' } }
  @layer two { p::after { content: 'two wins' } }
</style>
<p>Result: </p>
<div>
  <template>
    <style>
      @layer two { p::after { content: 'two wins' } }
      @layer one { p::after { content: 'one wins' } }
    </style>
    <p>Result: </p>
  </template>
</div>

The @layer rules in the light tree do not affect the @layer rules declared in the shadow tree.

In the light tree, the result is two wins. In the shadow tree, it is one wins.

Copy link
Copy Markdown
Collaborator

@fantasai fantasai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense. Suggest linking the terms. I'm unsure whether to use the long form or short form for the terms, though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants