On Apr 22, 2014, at 10:13 AM, Dimitri Glazkov <dglaz...@chromium.org> wrote:
> On Thu, Apr 17, 2014 at 2:42 AM, Ryosuke Niwa <rn...@apple.com> wrote:
> Review: Template Inheritance in the Current Specification
>
> In the current specification, a super class doesn't define any hooks for
> subclasses. Instead, it defines insertion points into which nodes from the
> original DOM ("light DOM") is inserted, and then subclasses use shadow
> element to replace elements that get distributed into superclass's insertion
> points.
>
> Consider my-card element used as follows:
> <my-card>
> <span class="name">Ryosuke Niwa</span>
> <span class="email">rn...@apple.com</span>
> </my-card>
>
> Suppose this element's shadow DOM looks like this:
> Name: <content select=".name"></content>
> Email: <content select=".email"></content>
>
> Then in the composed tree, the first span is distributed into the first
> content element and the second span is distributed into the second content
> element as follows:
> <my-card>
> <!-- shadow root begin -->
> Name: <content select=".name">
> <!-- distribution begin -->
> <span class="name">Ryosuke Niwa</span>
> <!-- distribution end -->
> </content>
> Email: <content select=".email">
> <!-- distribution begin -->
> <span class="email">rn...@apple.com</span>
> <!-- distribution end -->
> </content>
> <!-- shadow root end -->
> </my-card>
>
> If I had my-webkitten-card that always as "WebKitten" as a name that inherits
> from my-card, its shadow DOM may look like this:
> <shadow>
> <span class="name">WebKitten</span>
> <content></content>
> <span class="email">kit...@webkit.org</span>
> </shadow>
>
> If I had an instance of my-webkitten-card as follows:
> <my-webkitten-card>
> <span class="name">Ryosuke Niwa</span>
> <span class="email">rn...@webkit.org</span>
> </my-webkitten-card>
>
> Then its composed tree will look like this:
> <my-webkitten-card>
> <!-- my-webkitten-card's shadow root begin -->
> <shadow>
> <!-- my-card's shadow root begin -->
> Name: <content select=".name">
> <!-- distribution begin -->
> <span class="name">WebKitten</span>
> <span class="name">Ryosuke Niwa</span>
> <!-- distribution end -->
> </content>
> Email: <content select=".email">
> <!-- distribution begin -->
> <span class="email">rn...@webkit.org</span>
> <span class="email">kit...@webkit.org</span>
> <!-- distribution end -->
> </content>
> <!-- my-card's shadow root end -->
> </shadow>
> <!-- my-webkitten-card's shadow root end -->
> </my-webkitten-card>
>
> Here, my-card's shadow DOM was inserted into where the shadow element existed
> in my-webkitten-card's shadow DOM, and the insertion points inside my-card's
> shadow DOM got nodes distributed from shadow element's children including
> nodes inside content element. If we didn't have the content element inside
> my-webkitten-card with "name" and "email" classes, then we would only see
> WebKitten and kit...@webkit.org distributed into my-card's insertion points
> as in:
>
> <my-webkitten-card>
> <!-- my-webkitten-card's shadow root begin -->
> <shadow>
> <!-- my-card's shadow root begin -->
> Name:
> <content select=".name">
> <!-- distribution begin -->
> <span class="name">WebKitten</span>
> <!-- distribution end -->
> </content>
> Email:
> <content select=".email">
> <!-- distribution begin -->
> <span class="email">kit...@webkit.org</span>
> <!-- distribution end -->
> </content>
> <!-- my-card's shadow root end -->
> </shadow>
> <!-- my-webkitten-card's shadow root end -->
> </my-webkitten-card>
>
> Can you help me understand the problems you illustrated with the examples
> better? What's the desired behavior? Where does the problem arise? This is
> both for my-webkitten-card and for random-element examples. I would love to
> have these to start chewing on them.
Sorry, maybe my description wasn't clear. This example doesn't demonstrate any
issues. I was simply describing what the current specification does.
- R. Niwa
