Extend polymer element - access parent content

Question

I have the following polymer:

<polymer-element name="popup-element" attributes="popupStyle">
    <template>
        <div class="popup" id="popup" style="{{popupStyle}}">
            <div class="closebutton"></div>
            <content select=".title"></content>
            <br /><br />
            <content></content>
        </div>
    </template>
    <script type="text/javascript">
        Polymer('popup-element');
    </script>
</polymer-element>

Now I want to extend it in another polymer:

<polymer-element name="newfolder-element" attributes="popupStyle" extends="popup-element">
    <template>
        <shadow>
            <span class="title">Utwórz nowy folder</span>
            <input type="text" class="ginput" style="width: 350px; padding: 5px;" placeholder="Nowy katalog" />
            <br />
            <button class="action blue"><span class="label">Utwórz</span></button>
            <button class="action red" id="cancelBtn" on-click="{{closePopup}}"><span class="label">Anuluj</span></button>
            <content></content>
        </shadow>
    </template>
    <script>
        Polymer('newfolder-element');
    </script>

</polymer-element>

Why content between <shadow> and </shadow> doesn't appear. I want to place content of <shadow> ... </shadow> (child element) to <content></content> of parent element. How to make it working ?

CletusW CletusW · Accepted Answer · 2014-08-07T21:02:45

This used to be supported, but due to implementation concerns, it was removed. It will most likely be added in a future revision to the Shadow DOM spec.

Update: Here's a possible interim solution to this problem.

Extend polymer element - access parent content

2 Answers