Question

我想创建一个扩展原生HTML元素的新Polymer Element（比方说div），所以我可以使用<div is="my-div">，但继承了另一个Polymer元素（my-list）的行为。我通过以下方式实现了它：

<polymer-element name="my-list">
    <template>
        <style>
            :host {
                background-color: #EEE;
                display: block;
                border: 1px solid black;
            }
        </style>
        <content></content>
    </template>
    <script>
        Polymer('my-list', {
            color: "red",
            ready: function() {
                console.info("my-list is ready!");
                this.children[0].style.color = this.color;
            }
        });
    </script>
</polymer-element>
<polymer-element name="my-div" extends="div">
    <script>
        (function() {
            var myListProto = Polymer.getRegisteredPrototype("my-list");
            var myDivProto = Polymer.extend({}, myListProto);
            myDivProto.color = "blue";
            Polymer('my-div', myDivProto);
        }());
    </script>
</polymer-element>

工作jsFiddle是here。

问题是my-list样式不适用于my-div。

有没有办法继承它们？或者我应该以其他方式进行此类扩展吗？

Answer 1

在我看来，你在这里做的是一种混合技术。您有两个不在同一个继承链上的类，您希望共享一个API。

你为原型做了mixin部分，你也可以为模板做，但是有各种各样的细节。

这是一个JsBin，展示了我将如何做到：http://jsbin.com/vuru/1/edit

我将它更直接地构成了一个混合问题，这让我更容易使用。

我使用的关键信息：

如果您在Polymer原型中定义registerCallback()，则会在注册时调用它，原型为this，并引用<polymer-element>作为参数。< / p>
您可以覆盖fetchTemplate以自定义模板选择
如果您未在<polymer-element>之前将registerCallback()模板安装到Platform.ShadowCSS.shimStyling(...)，则必须手动调用shadow-dom CSS polyfill引擎（这就是：{{1 }}）。

Answer 2

不完全符合您的要求，但核心风格可让您定义可轻松包含在模板中的样式。然后，当您扩展元素时，请确保在子模板中包含相同的核心样式。

我试图通过子元素将扩展元素放入子元素中，但是这似乎不起作用。

无论如何，核心风格让传递风格变得非常简单。见https://pascalprecht.github.io/2014/08/01/sharing-styles-across-web-components-with-polymer-and-core-style/

如何继承样式以手动扩展Polymer Element？

2 个答案: