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

As this one is still being kicked around...

We've been experimenting internally with a slightlly different approach, moving the "scoped" attribute from the `<style>` to the scope root, and allowing values of `none` (for no scoping), or `inherit` and `isolate` to control the lower-boundary:
```html
<style>
 span { font-style: italic }
</style>
<div scoped="inherit">
 <style>
  span { font-weight: bold }
 </style>
 <span>bold and italic</span>
</div>
```
```html
<style>
 span { font-style: italic }
</style>
<div scoped="isolate">
 <style>
  span { font-weight: bold }
 </style>
 <span>bold only</span>
</div>
```
This is working well for our purposes (building up huge documents from many smaller ones with `<xi:include>`). We found for completeness we needed another value: `scoped=override`, which is added to a `<style>` to force the declarations to be applied even in an element with `scope="solate"`
```html
<style scoped="override">
 span { color: red }
</style>
<style>
 span { font-style: italic }
</style>
<div scoped="isolate">
 <style>
  span { font-weight: bold }
 </style>
 <span>bold only, but also red</span>
</div>
```

The need to impose upper and lower limits on the styles - scoping the scope, if you like - seems to be adding a lot of complexity, particularly when it's attempted from within the stylesheet itself (eg with @scope). It seems to me the decision on whether an element is a scope root belongs with the element itself, not with a stylesheet it includes.

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


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

Received on Monday, 14 September 2020 17:29:33 UTC