Re: [csswg-drafts] [css-scoping-1] Specificity of :host, ::slotted, and :host-context doesn't seem to be defined? (#1915)

One of the main reasons why I dislike `!important` so much here "as a solution" is that it forces the reliance on cascading order.

Imagine a web component and an extension of it:

```js
class FooExt extends FooEl {
  styles() {
    return `
      ${super.styles}
      
      ::slotted(#foo) {
        border-color: green !important;
      }
    `;
  }
}
```
The border color will only be green if this CSS part is later in the cascade than `super.styles`, because they both have `!important`. However, it's much cleaner if I can use CSS specificity e.g. by using an ID selector (`#foo`). This makes things less fragile and gives developers more control in my opinion, because it's a lot easier in practice to fight specificity wars than to fight cascade wars.

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


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

Received on Wednesday, 15 December 2021 12:04:12 UTC