Cat Hat in Dartium?

There was a kerfluffle on the W3 style mailing list the other day. I really try to avoid kerfluffles as much as possible so I won't get into the details. Rather, I simply note that the technical discussion was related to a part of Polymer with which I have not played—new CSS selectors.

The CSS selectors are the “cat”, so called because it looks like cat ears (^^) and the hat (^). The cat selector works in the shadow DOM of the containing Polymer and any child Polymers with their own shadow DOMs. The hat selector applies to the current Polymer's shadow DOM only.

In all honesty the names are probably too clever given their limited utility, but I still must investigate. Before I start, I note that Rob Dodson has a much better writeup on the topic than I will here. I learn by playing, but his writeup was more geared toward helping others understand. Still, I need to try this out myself…

After some experimentation with these operators in Dartium, it seems that I need to enable a flag chrome://flags:



Unfortunately, that does not seem to work in the Dartium that comes with Dart 1.1.1, so... I try compiling to JavaScript. That does not work because of a range error bug. Sigh, this was meant to be easy!

So instead, I try this in JavaScript. In my outside Polymer, I add the following CSS:

<link rel="import" href="../bower_components/polymer/polymer.html">
<style>
  pricing-plans ^^ p {
    font-style: italic;
  }
  pricing-plans ^ p {
    color: red;
  }
</style>
<polymer-element name="pricing-plans">
  <!-- ... -->
</polymer-element>

The cat selector should apply to all paragraph tags inside the <pricing-plans> Polymer, meaning that all paragraphs should be italicized. The hat selector should only apply to the immediate shadow DOM, meaning that only the paragraph tags inside the outer <pricing-plans> tag should be red.

And, finally, that actually works:



At least in Chrome with those experimental settings enabled it works. Firefox ignores the non-standard selector and simply applies both cat and hat selectors to all children:



That was much harder to get running than I expected. At least, once I got it running, it worked pretty much as expected. I still think that this will be of limited use. To be sure, there will be cases where this will be handy, but I suspect that using applyAuthorStyles in a Polymer (to pull in CSS from the containing document) will cover the 80% case.

Day #1,019

‹prev | My Chain | next›