W3C home > Mailing lists > Public > public-css-archive@w3.org > July 2021

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

From: Jorge del Casar via GitHub <sysbot+gh@w3.org>
Date: Mon, 19 Jul 2021 12:04:19 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-882492531-1626696258-sysbot+gh@w3.org>
@lilles how can solve this situation?

```html
<style>
/* extract from reset.css */
h1 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
</style>
<fancy-heading>
  # shadow-dom
   <style>
      ::slotted(h1) {
        font-size 2rem;
        margin-bottom: 1rem;
      }
  </style>
  #/ shadow-dom
  <h1>My title</h1>
</fancy-heading>
```

You can't override that from the `fancy-heading` Web Component. Both are applying to the same element in the tree and always won the specificity war the external stylesheet.

I guess that should be a way to win this war from the web component to avoid side effects. At least, `::slotted(h1)` should win

Full example here:

https://webcomponents.dev/edit/eQFJPlOvQMIuUZj71ohV/README.md

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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 19 July 2021 12:04:21 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:39 UTC