Question

我有以下聚合物：

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

现在我想用另一种聚合物扩展它：

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

为什么<shadow>和</shadow>之间的内容不会出现。我想将<shadow> ... </shadow>（子元素）的内容放到父元素的<content></content>。如何使它工作？

Answer 1

此used to be supported，但由于实施问题，it was removed。它很可能会在Shadow DOM规范的未来版本中添加。

更新：Here's此问题的可能临时解决方案。

Answer 2

这几乎使扩展功能对模板继承毫无用处！我看一下所有核心元素和纸质元素，很少重用它们的基本元素中的模板。为了解决这个限制，我必须使用像jade这样的预处理器来混合局部。但如果聚合物或规格可以支持这一点，它会更方便。有点令人沮丧的是，我需要花费这么多时间来修复应该存在的东西。

扩展聚合物元素 - 访问父内容

2 个答案: