W3C home > Mailing lists > Public > public-webapps@w3.org > January to March 2013

Re: [webcomponents] Styling the shadow based on the host element

From: Dimitri Glazkov <dglazkov@chromium.org>
Date: Mon, 11 Feb 2013 16:02:20 -0800
Message-ID: <CADh5Ky3mPFEg=UaqpTC=L7bMtdFf=pYzEb-a7cTmn+pYyP0dZw@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: public-webapps <public-webapps@w3.org>
On Mon, Feb 11, 2013 at 12:12 PM, Tab Atkins Jr. <jackalmage@gmail.com>wrote:

> It's possible to style a host element from within the shadow's
> stylesheet, and use the host's own qualities, by using the @host rule.
>  It's also possible to style the shadow elements themselves, in their
> own self-contained universe.
>
> What doesn't seem possible is to use the host element's qualities
> (such as tagname, attributes, class, etc.) to style elements in the
> shadow tree.
>
> Currently, the only way to even *refer* to the host element from
> within a shadow-tree stylesheet is by using the @host rule, which
> contains style rules. The selectors there are limited to only
> targetting the host element itself.
>
> This came up in a hallway discussion about dropping
> resetStyleInheritance in favor of CSS's new 'all' property
> <http://dev.w3.org/csswg/css3-cascade/#all-shorthand>.  Doing so would
> be fine, technically - the property accomplishes the same thing as the
> attribute - but it falls down on usability.  We want to *default* to
> having an inheritance shield, and let the author lower it if they
> choose, but you can't "unset" a property; if we start with "all:
> default" set, the author can't remove the declaration and lower the
> shield.  If we kept the attribute and simply implemented it as the
> 'all' property using an attribute selector, though, it all works out.
>
> However, you can't do that currently, as far as I can tell.  This
> ability seems to be potentially useful beyond the use-case above, just
> for a lot of author-facing design problems.
>
> The problem seems to stem from the fact that the host element is
> "owned" by both the outer page and the component author.  We currently
> work around that dual ownership by using @host to let you target the
> element directly.  However, this is an incomplete workaround.
>
> I have a possible solution, though I'm not sure I like it: expose a
> ::shadow(<selector>) pseudo-element that is only usable inside of
> @host.  This'll solve the problem, but it seems inelegant.
>
> Thoughts?
>

I don't have better solutions either, but I really like the notion of
dropping of resetStyleInheritance in favor of a CSS property.

Filed https://www.w3.org/Bugs/Public/show_bug.cgi?id=20957 and
https://www.w3.org/Bugs/Public/show_bug.cgi?id=20958.

:DG<
Received on Tuesday, 12 February 2013 00:02:52 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 18:49:57 GMT