Nested polymer template inheritance

Anthony Bobenrieth Published at Dev

Anthony Bobenrieth

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>

CletusW

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."

Collected from the Internet

Please contact [email protected] to delete if infringement.