[css-cascade] defining a layer with an attribute for ease of use with third-party injected style elements

[MSanbira]

After integrating the cascade layers into our existing main app (React), I had some trouble with third-party npm modules that inject their CSS with <style> tags dinamickly.

I needed them to be in the @layer third-party so it would not override the rest of our custom CSS. So I used a workaround by listening to the <header> changes and changing each <style> element's inner text. It worked great but it still feels a bit hacky.

Some time passed and I was thinking that adding an element attribute to define a layer from the outside like:

<header>
  <style layer="third-party">
    div { font-size: 42px; }
  </style>

  <!-- or -->
  
  <style cascade-layer="third-party">
    div { font-size: 42px; }
  </style>

  <!-- ... other styles -->
</header>

I know that it will help me for better integrations, I hope that some of you share similar opinions.
this is the first time trying to contribute to w3c, if some of you think I'm going about it in some wrong way please let me know. I want to start being a part of the CSS bigger picture, thanks.

[ydaniv]

Hey @MSanbira, that's probably not a bad idea, and it's already in progress (AFAIK), see here: https://css-tricks.com/css-cascade-layers/#aa-assigning-layers-in-html-with-the-link-tag 😄

[MSanbira]

@ydaniv thanks for commenting! 😌 I know there is a link tag attribute in progress but I'm talking about the style tag. webpack and other npm add-ons like to add their styles with style elements and not links. would the layer attribute in consideration also apply to style tags? because I didn't see any mention of this.

[SebastianZ]

The discussion for that is actually already happening in #5853.

@MSanbira Maybe you can outline your use case there.

Sebastian