W3C home > Mailing lists > Public > public-webapps@w3.org > October to December 2011

Re: [webcomponents]: First draft of the Shadow DOM Specification

From: Dimitri Glazkov <dglazkov@chromium.org>
Date: Fri, 23 Dec 2011 10:46:35 -0800
Message-ID: <CADh5Ky0+FT=CLPQquC9=2t3mEEmZuunu4+iOTsWYwbky-mUOfw@mail.gmail.com>
To: Brian Kardell <bkardell@gmail.com>
Cc: "Edward O'Connor" <eoconnor@apple.com>, public-webapps@w3.org
On Fri, Dec 23, 2011 at 10:37 AM, Brian Kardell <bkardell@gmail.com> wrote:
>
> On Dec 23, 2011 1:00 PM, "Dimitri Glazkov" <dglazkov@chromium.org> wrote:
>>
>> On Fri, Dec 23, 2011 at 5:23 AM, Brian Kardell <bkardell@gmail.com> wrote:
>> > In your example, you lost me on this part:
>> >
>> > // Insert Bob's shadow tree under the election story box.
>> > root.appendChild(document.createElement('shadow'));
>> >
>> > Is that wrong?  If not, can you explain it?
>>
>> Sure. Since Alice's shadow DOM subtree is added later than Bob's, his
>> tree is older than hers. The way shadow insertion point works, it
>> looks for an older tree in the tree stack, hosted by the <ul> element.
>> In this case, the older tree is Bob's. Thus, Bob's entire shadow DOM
>> tree is inserted in place of the <shadow> element. Does that make more
>> sense? What can I do to improve the example? A diagram perhaps? Please
>> file a bug with ideas.
>
> Hmmm.  So if you say document.createElement('shadow') it actually gives you
> a reference to the most recently  added shadow hosted by the same element?
> It doesn't really create?  What if you did that and there were none?  Would
> it throw?  Seems kind of tough to wrap my head around let me think about it
> some more and I will file a bug if I have any ideas.

No, in DOM you don't get any references to other shadows. You get an
HTMLShadowElement, which is a DOM element that represents a shadow
insertion point. From the DOM perspective, it will always look like an
HTMLShadowElement: no more, no less. The replacement only happens when
rendering. And yep, this is a newish concept in the Web platform.

>
>>
>> > also... How does this patter
>> > give browsers timely enough information to avoid fouc?  It feels like
>> > there
>> > is a piece missing..
>>
>> In this particular case, since both Bob and Alice use
>> DOMContentLoaded, FOUC is not an issue. The first paint will occur
>> after the shadow subtrees are in place.
> A handler attached to DOMContentLoaded doesn't block painting...   That
> doesn't sound right to me...  It might be generally faster than people
> notice, but it still depends right?   In practice a lot of css is already
> applied at that point...yeah?  You could still get fouc right?

Right! All standard good Web development practices still apply.

>
>> :DG<
>>
>> >
>> > On Dec 22, 2011 8:16 PM, "Brian Kardell" <bkardell@gmail.com> wrote:
>> >>
>> >> Quick note :  That is the single best draft prose I have ever read :)
>> >>
>> >> On Dec 22, 2011 6:56 PM, "Dimitri Glazkov" <dglazkov@chromium.org>
>> >> wrote:
>> >>>
>> >>> BTW, added an example:
>> >>>
>> >>>
>> >>> dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#shadow-dom-example
>> >>>
>> >>> :DG<
>
> On Dec 23, 2011 1:00 PM, "Dimitri Glazkov" <dglazkov@chromium.org> wrote:
>>
>> On Fri, Dec 23, 2011 at 5:23 AM, Brian Kardell <bkardell@gmail.com> wrote:
>> > In your example, you lost me on this part:
>> >
>> > // Insert Bob's shadow tree under the election story box.
>> > root.appendChild(document.createElement('shadow'));
>> >
>> > Is that wrong?  If not, can you explain it?
>>
>> Sure. Since Alice's shadow DOM subtree is added later than Bob's, his
>> tree is older than hers. The way shadow insertion point works, it
>> looks for an older tree in the tree stack, hosted by the <ul> element.
>> In this case, the older tree is Bob's. Thus, Bob's entire shadow DOM
>> tree is inserted in place of the <shadow> element. Does that make more
>> sense? What can I do to improve the example? A diagram perhaps? Please
>> file a bug with ideas.
>>
>> > also... How does this patter
>> > give browsers timely enough information to avoid fouc?  It feels like
>> > there
>> > is a piece missing..
>>
>> In this particular case, since both Bob and Alice use
>> DOMContentLoaded, FOUC is not an issue. The first paint will occur
>> after the shadow subtrees are in place.
>>
>> :DG<
>>
>> >
>> > On Dec 22, 2011 8:16 PM, "Brian Kardell" <bkardell@gmail.com> wrote:
>> >>
>> >> Quick note :  That is the single best draft prose I have ever read :)
>> >>
>> >> On Dec 22, 2011 6:56 PM, "Dimitri Glazkov" <dglazkov@chromium.org>
>> >> wrote:
>> >>>
>> >>> BTW, added an example:
>> >>>
>> >>>
>> >>> dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#shadow-dom-example
>> >>>
>> >>> :DG<
Received on Friday, 23 December 2011 18:47:07 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 18:49:49 GMT