- 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
@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