- From: Dimitri Glazkov <dglazkov@google.com>
- Date: Thu, 8 Nov 2012 09:49:55 -0800
- To: Maciej Stachowiak <mjs@apple.com>
- Cc: public-webapps <public-webapps@w3.org>, Blake Kaplan <mrbkap@mozilla.com>, Jonas Sicking <sicking@mozilla.com>, Elliott Sprehn <esprehn@google.com>, Boris Zbarsky <bzbarsky@mit.edu>
Sure. Here's a simple example without getting into traversable shadow trees (those are still being discussed in a different thread): A1) Using constructable ShadowRoot: var element = document.querySelector('div#foo'); // let's add a shadow root to element var shadowRoot = new ShadowRoot(element); // do work with it.. shadowRoot.applyAuthorSheets = false; shadowRoot.appendChild(myDocumentFragment); A2) Using addShadowRoot: var element = document.querySelector('div#foo'); // let's add a shadow root to element var shadowRoot = element.addShadowRoot(); // do work with it.. shadowRoot.applyAuthorSheets = false; shadowRoot.appendChild(myDocumentFragment); Now with traversable shadow trees: B1) Using constructable ShadowRoot: var element = document.querySelector('div#foo'); alert(element.shadowRoot); // null var root = new ShadowRoot(element); alert(root === element.shadowRoot); // true var root2 = new ShadowRoot(element); alert(root === element.shadowRoot); // false alert(root2 === element.shadowRoot); // true B2) Using addShadowRoot: var element = document.querySelector('div#foo'); alert(element.shadowRoot); // null var root = element.addShadowRoot(); alert(root === element.shadowRoot); // true var root2 = element.addShadowRoot(); alert(root === element.shadowRoot); // false alert(root2 === element.shadowRoot); // true :DG< On Thu, Nov 8, 2012 at 9:42 AM, Maciej Stachowiak <mjs@apple.com> wrote: > > Could you please provide equivalent code examples using both versions? > > Cheers, > Maciej > > On Nov 7, 2012, at 10:36 AM, Dimitri Glazkov <dglazkov@google.com> wrote: > >> Folks, >> >> Throughout the year-long (whoa!) history of the Shadow DOM spec, >> various people commented on how odd the constructable ShadowRoot >> pattern was: >> >> var root = new ShadowRoot(host); // both creates an instance *and* >> makes an association between this instance and host. >> >> People (I cc'd most of them) noted various quirks, from the >> side-effectey constructor to relatively uncommon style of the API. >> >> I once was of the strong opinion that having a nice, constructable >> object has better ergonomics and would overcome the mentioned code >> smells. >> >> But... As we're discussing traversable shadows and the possibility of >> having Element.shadowRoot, the idea of changing to a factory pattern >> now looks more appealing: >> >> var element = document.querySelector('div#foo'); >> alert(element.shadowRoot); // null >> var root = element.addShadowRoot({ resetStyleInheritance: true }); >> alert(root === element.shadowRoot); // true >> var root2 = element.addShadowRoot(); >> alert(root === element.shadowRoot); // false >> alert(root2 === element.shadowRoot); // true >> >> You gotta admit this looks very consistent and natural relative to how >> DOM APIs work today. >> >> We could still keep constructable object syntax as alternative method >> or ditch it altogether and make calling constructor throw an >> exception. >> >> What do you think, folks? In the spirit of last night's events, let's vote: >> >> 1) element.addShadowRoot rocks! Let's make it the One True Way! >> 2) Keep ShadowRoot constructable! Factories stink! >> 3) Let's have both! >> 4) element.addShadowRoot, but ONLY if we have traversable shadow trees >> 5) Kodos. >> >> :DG< >> >> P.S. I would like to retain the atomic quality of the operation: >> instantiate+associate in one go. There's a whole forest of problems >> awaits those who contemplate detached shadow roots. >> >
Received on Thursday, 8 November 2012 17:50:23 UTC