- From: Dominic Cooney <dominicc@chromium.org>
- Date: Wed, 26 Jun 2013 12:36:35 +0900
- To: Hayato Ito <hayato@google.com>
- Cc: Dimitri Glazkov <dglazkov@google.com>, public-webapps <public-webapps@w3.org>, Boris Zbarsky <bzbarsky@mit.edu>, Jonas Sicking <jonas@sicking.cc>, William Chen <wchen@mozilla.com>, Blake Kaplan <mrbkap@mozilla.com>, Daniel Buchner <daniel@mozilla.com>, Takashi Sakamoto <tasak@google.com>
- Message-ID: <CAHnmYQ8dCba1Tn9UN=_vY7+-Ye7O0nyb14YTQpUtC5TJ+StaOQ@mail.gmail.com>
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 >
Received on Wednesday, 26 June 2013 03:37:03 UTC