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

On Tue, Jun 25, 2013 at 7:18 AM, Dimitri Glazkov <dglazkov@google.com> wrote:
> 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.

For a shadow host which hosts multiple shadow roots, the shadow host
can be in more than Two Places at Once, right? :)


>
> 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<



--
Hayato

Received on Tuesday, 25 June 2013 02:25:17 UTC