Re: [csswg-drafts] [css-cascade] Evaluate specificity of ::slotted and global styles in the same conditions (#6466)

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:

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/6466#issuecomment-994727306 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:05:30 UTC