@mia
-
@mia do you know of any proposed/theorized delivery of @scope rules via an attribute?
In the way:
```
<div>
<style>
@scope {
:scope { /* styles for div */ }
}
</style>
</div>
```
Applies locally, but requires duplication, unlike:
```
@scope (div, .other-thing, .etc) {}
```
But without knowing in advance all the elements it will apply to?
```
/*styles.css*/
:scope { ... }
/*html*/
<div apply-scoped-styles="styles.css"></div>
```
Styles.css applied via @scope to the <div>. -
@westbrook @mia oooo I like this!
When I tested preludeless scope the duplication significantly harms performance at large scale (>2000 elements) which would probably prevent it from being adopted as a defacto replacement for CSS-in-JS.
It would be nice if you could target an ID instead, then that ID could be a pointer for either a <link> or <style> element.
-
@ryantownsend Also, I think I saw you demo this...was there a public URL/write up that I could link to in the issue?
-
@westbrook sure thing
https://css-scope-test.netlify.app -
@westbrook I don't know about any discussion like that. What's the advantage for you over
```css
@ scope ([use-the-scope]) {
:scope {}
}
```html
<any-thing use-the-scope></any-thing>
```?
-
@mia @westbrook I guess going preludeless guarantees zero naming clashes.
Personally, I’m on the side of naming things and treating clashes as silly mistakes, but many larger companies have relied on CSS-in-JS auto-generating class names, so a well-performing preludeless solution would remove the friction in migrating away from that complexity/overhead to a no-build solution.
