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

On Tue, Jun 25, 2013 at 11:24 AM, Hayato Ito <hayato@google.com> wrote:

> 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? :)


I don't think so. Can you provide an example?

Dominic


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