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

Revisiting this after reading (and briefly participating in) [this Twitter thread](https://twitter.com/Rich_Harris/status/1161335244802404352) today...

In my last post I said:

> I would really like to see @scope in addition to the Shadow DOM, because it's simpler and it covers the use case where you don't want to prevent outside styles from leaking in, but you want to prevent inside styles from leaking out AND have the ability to easily override outside styles without knowing/caring about their specificity.

But thinking about this some more, it would actually be easy to prevent outside styles from leaking in as well, if we wanted to:

```
/* messy stylesheet rules here... */

@scope .new-module {
    * {
        all: revert;
    }

    :scope {
        all: initial;
    }

    .new-module-box {
        font-size: 18px;
        color: blue;
    }
}
```

Resetting all properties to their `initial` value on the scoping root (`:scope`) ensures that no values are inherited from outside without breaking inheritance within the scope, and reverting all properties to their UA defaults on every element in the scope (except the scoping root) ensures that no global rule from outside (such as `p { font-size: 24px; }`) is applied.

Really loving this proposal.

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

Received on Tuesday, 13 August 2019 21:37:52 UTC