Re: [csswg-drafts] [css-scoping] Please bring back scoped styles (#3547)

I would love something like this. I've been experimenting with a custom HTML tag I call `<style-container>` that acts as a container for scoping CSS styles, and I'm also exploring the idea of interpreting contained media queries as container queries based off the `<style-container>` tag's dimensions, here's how I'm working with it:

```html
<style-container>

  <div>Make me 500+ px wide</div>

  <style media=none>
    div {
      border: 1px solid;
      padding: 1em;
    }
    @media (min-width: 500px) {
      div {
        background: lime;
      }
    }
  </style>

</style-container>

<script type=module>
  import styleContainer from 'https://unpkg.com/style-container'

  styleContainer()
</script>
```

- A version you can play around with: https://codepen.io/tomhodgins/pen/NoPNGY
- the source code of the plugin is here: https://github.com/tomhodgins/style-container/blob/master/index.js

From what I can see there are two main benefits:

1. Having something like this would be good for modularizing code - you could safely include stylesheets in certain HTML elements and be sure they weren't going to apply to other elements.

2. Another potential benefit — is it possible that interpreting media queries as based on the containing element's dimensions could be a way that existing CSS written with media queries can be re-used for modular responsive styles without having to refactor existing styles or introducing new syntax?

-- 
GitHub Notification of comment by tomhodgins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3547#issuecomment-456578803 using your GitHub account

Received on Tuesday, 22 January 2019 21:56:49 UTC