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

Oh! I didn't realize there was a parent/child relationship going on here, I gotcha now. I should read more. (Cases like this are often confusing to explain; it helps to provide a markup example with shadow trees drawn in.)

(Yeah, it's *technically* not specificity, but that's close enough to work. Technically it's the ["Shadow Tree" cascade step](https://drafts.csswg.org/css-scoping/#shadow-cascading); specificity is another cascade step.)

So yeah, the `::slotted(*)` and `:host` rules come from different trees, and the `::slotted(*)` tree is earlier in the tree order (as it's a parent), so it wins. This is meant to address the usage pattern that components can set up their defaults via normal styling, then users of the components can reach in and override easily; components can guard styles that *must* be a particular value with !important, which wins over outside rules.

So yeah, the element ends up green, and that's intended behavior.

In general, styling of the host element is a coordination between the shadow tree and the outside page. `::slotted()` isn't relevant to this example; you could just as easily have had:

```html
<style>
.foo { color: green; }
</style>
<x-foo class=foo>
 <::shadow>
  <style>
  :host { color: red; }
  </style>
 </::shadow>
</x-foo>
```

In this case, the element ends up with `color: green`, again because the "green" rule comes from an "earlier" tree in the tree-of-trees than the "red" rule.

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

Received on Tuesday, 17 April 2018 23:07:55 UTC