- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Mon, 23 Sep 2013 15:03:27 -0700
- To: Dimitri Glazkov <dglazkov@google.com>
- Cc: public-webapps <public-webapps@w3.org>, Steve Orvell <sorvell@google.com>, Scott Miles <sjmiles@google.com>, Blake Kaplan <mrbkap@mozilla.com>, Elliott Sprehn <esprehn@gmail.com>, Dominic Cooney <dominicc@google.com>, William Chen <wchen@mozilla.com>, fantasai <fantasai@inkedblade.net>, David Baron <dbaron@dbaron.org>
On Thu, Sep 19, 2013 at 4:09 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> So, to be clearer, we'd be adding two new combinators, "^" and "^^".
> "^", the shadow combinator (or "hat"), pierces the upper-boundary
> encapsulation of a shadow root. The LHS has to be a component,
> something with an actual shadow root. "^^", the "all shadows"
> combinator (or "cat", or "double-hat"), is identical, but it pierces
> *all* shadow root upper boundaries.
Further use-case exploration by the Polymer folk has revealed that
this definition of ^^ is a bit too weak for a lot of reasonable
use-cases.
One of the major uses of ^^ is to simply target all <x-foo> elements
for styling. Unfortunately, this means you need to ugly up your
selectors:
x-foo + div.bar, * ^^ x-foo + div.bar {...}
As far as they could tell from use-case exploration, this is by far a
more common use than what's implied by the stricter form defined in
the quote above.
To fix this, we propose that ^^ should instead be interpreted as
simply a "more powerful descendant selector". Writing "* ^^ x-foo"
will selector *all* <x-foo> elements within your context, or in lower
contexts. (It'll miss the root element if it's an <x-foo>, but that's
probably rare, and you can catch it by just writing a selector like
what I wrote above.)
Related to this, we have to figure out what the relative strength of
selectors are in different trees. Again, according to use-case
exploration, it seems that styling *inside* a component is basically
always setting *defaults*, which should be overrideable by the outside
world. To address this in a reliable way, I propose adding another
Cascade layer <http://dev.w3.org/csswg/css-cascade/#cascadinghttp://dev.w3.org/csswg/css-cascade/#cascading>,
between Origin and Scope, which is Tree-of-Trees position. Higher
trees (closer to the document root) beat lower trees. Sibling trees
(which can happen when a single element has multiple shadow roots
attached) are youngest-beats-oldest.
(I had thought to handle this with my proposal for setting styles to a
"default" origin, but it doesn't quite mesh. My "!default" idea makes
a style which loses to *everything* non-default, including
inheritance. The Polymer people didn't want things *this* weak.)
~TJ
Received on Monday, 23 September 2013 22:04:13 UTC