Re: :host pseudo-class

On Mon, Apr 27, 2015 at 6:22 AM, Anne van Kesteren <annevk@annevk.nl> wrote:
> On Mon, Apr 27, 2015 at 5:56 AM, L. David Baron <dbaron@dbaron.org> wrote:
>> For :host it's less interesting, but I thought a major use of
>> :host() and :host-context() is to be able to write selectors that
>> have combinators to the right of :host() or :host-context().
>
> Would they match against elements in the host's tree or the shadow
> tree? I don't see anything in the specification about this.

They would match elements in the shadow tree.

A typical use case is to style elements in the shadow tree based on
its host's attributes:

<my-custom-element disabled>
    <custom-child></custom-child>
</my-custom-element>

In the shadow tree for <my-custom-element>:

<style>
    :host([disabled]) ::content custom-child { color: #444 }
    :host([disabled]) input { border-color: #ccc }
</style>
<content></content>
<input type=text>

-- 
Rune Lillesveen