[webcomponents]: Shadow DOM + CSS = <3 Meeting Summary

Dear WebAppelites,

This past Friday, in always sunny (except when foggy) San Francisco,
there has been a (totally not) s3kr3t gathering of minds
(http://www.w3.org/wiki/Webapps/WebComponentsJune2013Meeting), where
the said minds ploughed through the fertile soils of existing Shadow
DOM styling problems, sowing wisdom in righteous exultation. And out
of these soils arose these delicious new fruits^H^H^H CSS primitives.

Please try and see if they seem edible for you. I documented them as
changes from what's currently specified
(http://www.w3.org/TR/shadow-dom/).

1) Now More Awesome than Superman, Shadow Host can be in Two Places at Once.

The host of a shadow tree matches styles both in the document (outer)
tree and the shadow (inner) tree. For example, in this example:

<style> #host { border: 1px red solid; } </style>
<div id="host"></div>
<script>
   var root = document.querySelector('#host').createShadowRoot();
   var style = root.appendChild(document.createElement('style'));
   style.textContent = '#host { padding: 20px; }';
</script>

The div#host will be both red-bordered and nicely padded.

2) OMG, We Killed @host. We're bastards.

Sorry folks, the @host at-rule died under questionable circumstances.
Let's not dwell on it and move on.

3) Long Live :host!

... Instead, we came up with a new pseudo-class, which does something
even cooler. Watch this:

:host { ... } /* matches shadow host */

:host() { ... } /* also matches shadow host */

:host(div.who-mourns-for-morn) { ... } /*
  matches a div with class "who-mourns-for-morn" anywhere in the outer trees,
  up to and including the document tree */

:host(<any-compound-selector>) /*
  matches an element that matches <any-compound-selector> anywhere in the
  outer trees (relative to this shadow tree), up to and including the document
  tree. */

Please note that only a compound selector
(http://dev.w3.org/csswg/selectors4/#compound) is allowed in the
host's parens.

4) Artist Formerly Known as ::distributed, Now Less Lispy

We also killed the parens around ::distributed and renamed to
::content. See tabatkins@' clever twit about that
(https://twitter.com/tabatkins/status/348190487003410433). Looking for
allergic reactions to this particular pome.

5) Custom Pseudo-elements Part-y

To avoid using "x-" prefix and unable to find anything more elegant,
we agreed to use a new ::part(name) syntax for custom pseudo-elements,
also renaming the respective attribute. In other words, instead of
<div pseudo="x-rawr"></div>, which is reachable from outside of the
shadow tree as host::x-rawr, we turned this into:

<style> #host::part(rawr) { border: 1px red solid; } </style>
<div id="host"></div>
<script>
   var root = document.querySelector('#host').createShadowRoot();
   var div = root.appendChild(document.createElement('div'));
   div.part = 'rawr'; // I haz red border nao.
</script>

(I can't seem to find this discussion in the transcript. Perhaps the
dingo ate it?)

There was also some scandalous experimentation with using δΈ‹ and o_O as
new types of combinators _just_ for the Shadow DOM. Sadly, both were
frowned upon by the cranky chair. You can find all of this (and more!)
in the minutes (http://www.w3.org/2013/06/21-webapps-minutes.html).

All in all, a great meeting. Special thanks to all participants, the
awesome scribe, and the Mighty Three Dub Cee, may you flourish with a
million of similar focused, productive gatherings.

:DG<

Received on Monday, 24 June 2013 22:19:01 UTC