如何繼承手動擴展的聚合物元素的樣式？

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/