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

That indeed makes for some truly terrible developer experience for custom elements using ShadowDOM, as it would require me to rewrite all my styles that use `::slotted` to have an `!important` out of precaution, to prevent that global stylesheets overrides it.

```css
.accordion ::slotted([slot='invoker']) {
  margin: 0;
}

.accordion ::slotted([slot='invoker'][expanded]) {
  font-weight: bold;
}

.accordion ::slotted([slot='content']) {
  margin: 0;
  visibility: hidden;
  display: none;
}

.accordion ::slotted([slot='content'][expanded]) {
  visibility: visible;
  display: block;
}
```

becomes:

```css
.accordion ::slotted([slot='invoker']) {
  margin: 0 !important;
}

.accordion ::slotted([slot='invoker'][expanded]) {
  font-weight: bold !important;
}

.accordion ::slotted([slot='content']) {
  margin: 0 !important;
  visibility: hidden !important;
  display: none !important;
}

.accordion ::slotted([slot='content'][expanded]) {
  visibility: visible !important;
  display: block !important;
}
```

That also means that if I have a web component extension class that wants to extend my component with overrides, they themselves will be forced to do the same thing as well.

I would definitely prefer it if:

```
Specificity of ::slotted() is 1 pseudoclass + specificity of argument.
```

Similar to `:host`, for pretty much the same reasons.


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


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

Received on Tuesday, 20 July 2021 12:51:39 UTC