Re: [csswg-drafts] [specificity] Specifity of ::slotted() is greater than :host

I did provide a jsbin example but perhaps I should have been more explicit in my explanation.

Thanks very much for taking the time to explain that. I won't pretend to understand it all but I get the gist of it. I don't agree with the approach of using `!important` one should allow nested components to supersede styling from up the tree, but not to prevent it entirely.

Coming from conventional html and css and my inferior experience with custom elements and the shadow dom, it doesn't seem natural to me, but I appreciate I'm probably not smart enough to understand the reasons why.

The best method I can find is to use a custom css property. This allows me to let nested custom elements override styles from outside but still allow me override the styling of the component should I need to. It might be useful to someone else in my situation although I feel one shouldn't have to do this because it can complicate things depending on your project.

```
/* my-parent.html */
:slotted(*) {
    color: var(--color);
    --color: green;
}

/* my-child.html */
:host {
    color: var(--color);
   --color: red !important;
}
```


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

Received on Tuesday, 17 April 2018 23:46:49 UTC