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

@jorgecasar Let's simplify your example here: https://studio.webcomponents.dev/edit/pfG64tqPVJuqAsiGY0g8/src/my-content.js?p=README.md

You've used typography styles which are complex to begin with because they already penetrate the shadow DOM.  They're some of the few properties that do.

Let's focus the example on the use of `!important` when it comes to styling the background color (which does not penetrate shadow DOM boundaries).

I've reduced the component's template to:
```
<style>
  ::slotted(.important) {
    background-color: green !important;
  }
</style>
<slot></slot>
```

Now on your page, all you need to do to override this green background color is:

```
<style>
  /* Override styles */
  my-content .important {
    background-color: pink !important;
  }
</style>
<my-content>
  <p>Slotted paragraph</p>
  <p slot="content" class="important">Slotted paragraph with <code>!important</code></p>
</my-content>
```

I've used a simple selector here on my page so you can see that the specificity of the selector isn't as important either: just the component and the class we're targeting.  You can see in my provided link that this works as I would expect.

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


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

Received on Wednesday, 27 July 2022 16:13:58 UTC