W3C home > Mailing lists > Public > www-style@w3.org > April 2015

Re: :host pseudo-class

From: Rune Lillesveen <rune@opera.com>
Date: Mon, 27 Apr 2015 09:03:30 +0200
Message-ID: <CANz6XvSVHRQVkga8dE_SWWvY7Xo0De2HZGmjqmvg+G0AqnS8gA@mail.gmail.com>
To: Anne van Kesteren <annevk@annevk.nl>
Cc: "L. David Baron" <dbaron@dbaron.org>, "www-style@w3.org" <www-style@w3.org>, WebApps WG <public-webapps@w3.org>
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
Received on Monday, 27 April 2015 07:03:58 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:30 UTC