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

我想创建一个新的聚合元素来扩展原生HTML元素（比如说

div

） ，因此我可以使用

，但继承了另一个聚合元素（

我的列表

）的行为。 我通过以下方式实现了这一目标：

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

：主持人{
背景色：#EEE；
显示：块；
边框：1px纯黑；
}
聚合物（“我的清单”{
颜色：“红色”，
就绪：函数（）{
console.info（“我的列表准备好了！”）；
this.children[0].style.color=this.color；
}
});
（功能（）{
var myListProto=Polymer.getRegisteredPrototype（“我的列表”）；
var myDivProto=Polymer.extend（{}，myListProto）；
myDivProto.color=“蓝色”；
聚合物（“my-div”，myDivProto）；
}());

工作是一件好事

问题是

my list

样式不适用于

my div

---

有没有办法继承他们呢？或者我应该以其他方式进行这种扩展吗？

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

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

下面是一个JsBin，展示了我将如何做到这一点：

我把它更直接地定义为一个混合问题，这使我更容易处理

我使用的关键信息：

• 如果您在聚合物原型中定义了一个

  registerCallback（）

  ，则会在注册时调用它，原型为

  this

  ，引用
  作为参数

• 您可以覆盖

  fetchTemplate

  以自定义模板选择

• 如果在

  registerCallback（）

  之前未将模板安装到
  中，则必须手动调用shadow dom CSS polyfill引擎（即此位：

  Platform.ShadowCSS.shimStyling（…）

  ）

---

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

我花了一段时间试图通过子元素中的via将扩展元素引入子元素，但这似乎不起作用

---

总之，核心风格使得传递风格变得非常容易。请参见此处

谢谢！：）我将尝试更多地使用您的示例，因为我的想法是

我的列表

不应该公开任何全局变量等。因为它应该是分离的元素，完全不知道

我的div

。一般来说，我试图使

成为独立元素，但我希望能够将其行为应用于其他本机元素（div、ul、ol等）。我当然也建议学习第一个示例，因为概念并不太难（但有一些细节）。但这里有一个例子更接近于我认为你所追求的：哦，是的，还有一件事：的确，我没能把“我的清单”列出来，而不知道你打算如何使用它。Fwiw，这是因为polyfills必须做些什么来扩展CSS，在将来的某个时候，您可能会避免这个问题。