javascript - 如何继承手动扩展的 polymer 元素的样式？

Question

我想创建新的 polymer 元素来扩展 native HTML 元素(比方说 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。

你为原型(prototype)做了 mixin 部分，你也可以为模板做这件事，但有各种细节。

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

我更直接地将其描述为混合问题，这使我更容易处理。

我使用的关键信息:

• 如果您定义 registerCallback()在您的 Polymer 原型(prototype)中，它会在注册时回调，原型(prototype)为 this以及对 <polymer-element> 的引用作为一个论点。

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

• 如果您没有将模板安装到 <polymer-element>之前registerCallback()有时，您必须手动调用 Shadow-dom CSS polyfill 引擎(即: Platform.ShadowCSS.shimStyling(...) )。