Extending Polymer Element - Accessing Parent Content
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 expand 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 is the content between <shadow>
and </shadow>
not showing. I want to place content <shadow> ... </shadow>
(child) in the <content></content>
parent. How do I make it work?
source to share
This one was used for support , but due to implementation issues it has been removed . It will most likely be added in a future version of the Shadow DOM specification.
Update : Here is a possible interim solution to this problem.
source to share
This almost makes the extends function useless for template inheritance! I look at all the basic elements and paper elements, rarely do they reuse templates from their basic element. To get around this limitation, I have to use a preprocessor like jade for partial elements. But if a polymer or specification can support it, it will be much more convenient. It's a little disappointing that I have to spend so much time fixing what should be there.
source to share