Nested polymer template inheritance

Question

Is there any way to surround a polymer child template with its parent's template?

In the following example shadow tag bring the parent's template into the child view, but it's ignoring its content:

Parent polymer element

<polymer-element name="my-window">
  <template>
    <div class="windowframe">
      <p>test</p> <!-- can be shown with shadow tag -->
      <content></content> <!-- cannot be used with shadow tag -->

Child polymer element

<polymer-element name="my-window-example" extends="my-window">
  <template>
    <!-- get the hosts' shadow and insert here -->
    <shadow>
       <p>Here is the content of my window<p> <!--won't be shown -->
    </shadow>
  </template>

Answer 1

This used to be possible in Chrome Canary (see this blog post, this discussion, the fixed spec bug, and the fixed Chromium bug), but unfortunately it doesn't seem to be working for me anymore in Chrome 33.0.1750.22 dev on Linux or Chrome 34.0.1809.0 canary on Windows with the "Enable experimental Web Platform features" flag on or off. Try this jsbin to see if it works for you.

Update: Confirmed. This feature was removed from the initial implementation of Shadow DOM in Chrome due to "implementation concerns."

Answer 2

I guess you would need functionality like the select='selector' attribute of the <content> tag for the <shadow> tag where you can select a few nodes from the older shadow and position them with one <shadow> tag and select and position the rest with a second <shadow> tag.

I haven't found anything about this though and I am quite sure that this isn't supported.

This discussion might be interesting https://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/zR64jebST4c