[csswg-drafts] [css-cascade] defining a layer with an attribute for ease of use with third-party injected style elements (#7592)

MSanbira has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-cascade] defining a layer with an attribute for ease of use with third-party injected style elements ==
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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7592 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 11 August 2022 11:52:00 UTC