如何继承手动扩展的聚合物元素的样式？

Question

我想创建扩展本机HTML元素（比如div ）的新Polymer元素，因此我可以使用<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在这里 。

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

有没有办法继承它们呢？ 还是应该以其他方式进行此类扩展？

Answer 1

在我看来，您在这里所做的是一项混合技术。 您有两个不在同一个继承链上的类，这些类要共享一个API。

您为原型完成了mixin部分，也可以为模板进行了混合，但是有很多细节。

这是一个显示我将如何执行的JsBin： http ://jsbin.com/vuru/1/edit

我将其直接设计为一个混入问题，这使我更易于使用。

我使用的主要信息：

• 如果定义registerCallback()中的聚合物的原型，它的在登记时间与原型作为回叫this和所述参考<polymer-element>作为参数。

• 您可以覆盖fetchTemplate以自定义模板选择

• 如果没有在registerCallback()之前将模板安装到<polymer-element> ，则必须手动调用shadow-dom CSS polyfill引擎（这一点是： Platform.ShadowCSS.shimStyling(...) ） 。

Answer 2

核心样式不完全是您想要的样式，您可以定义可以轻松包含在模板中的样式。 然后，当您扩展元素时，请确保在子模板中包括相同的核心样式。

我一团糟试图将扩展元素通过子元素添加到子元素中，但这似乎没有用。

无论如何，核心样式使传递样式变得非常容易。 看到这里https://pascalprecht.github.io/2014/08/01/sharing-styles-across-web-components-with-polymer-and-core-style/