Polymer 1.0版中自定义聚合物元素的继承

我有两种聚合物元素，它们具有相似的特性。我正在尝试将这两个元素“合并”为一个元素。我在文档中看到的是，在polymer 1.0中无法继承自定义元素

从这里开始：

<div title="{{tile.description}}" class="flex-item">
    <template is='dom-if' if='{{typeIsSingle}}'>
        <single-item-tile tile='{{tile}}'></single-item-tile>
    </template>
    <template is='dom-if' if='{{typeIsGrouped}}'>
        <multiple-items-tile tile='{{tile}}'></multiple-items-tile>
    </template>
    ...

...

以下是两个非常相似的元素：

<dom-module id="single-item-tile">

    <style>
        .big {
            --iron-icon-width: 96px;
            --iron-icon-height: 96px;
        }
    </style>

    <template>
        <paper-button on-click="navigateTo">
            <iron-icon class="big" icon="{{icon}}"></iron-icon>
            <h4>{{tile.label}}</h4>
        </paper-button>
    </template>

    <script>
        Polymer({
            is: 'single-item-tile',
            properties: {
                label: String,
                icon: {
                    type: String,
                    value: "check-box-outline-blank"
                },
                tile: Object
            },
            navigateTo: function () {
                window.open(this.tile.url + "?id=" + this.tile.landingPageQuestionnaireItems[0].id);
            }
        });
    </script>

</dom-module>

.大{
--铁图标宽度：96px；
--铁图标高度：96px；
}
{{tile.label}
聚合物({
是：'单件瓷砖'，
特性：{
标签：字符串，
图标：{
类型：字符串，
值：“复选框边框空白”
},
平铺：对象
},
导航到：函数（）{
window.open（this.tile.url+“？id=“+this.tile.landingPageQuestionnaireItems[0].id”）；
}
});

以及：

.大{
--铁图标宽度：96px；
--铁图标高度：96px；
}
纸张-对话框。尺寸-位置{
位置：相对位置；
顶部：-180px；
左：20px；
最小宽度：200px；
最小高度：150px；
背景：#fff；
}
.questionnaireitemto选择：悬停{
背景色：#E3；
}
{{tile.label}
{{item.label}
聚合物({
是：“多项目平铺”，
特性：{
标签：字符串，
图标：{
类型：字符串，
值：“内容副本”
},
平铺：对象
},
showGroupedItems:函数（e）{
var dialog=document.getElementById（'问卷选择器'）；
如果（对话框）{
dialog.open（）；
}
},
handleClick:函数（e）{
var dialog=document.getElementById（'问卷选择器'）；
dialog.close（）；
打开（this.tile.url+“？id=“+e.currentTarget.id”）；
}
});

目前解决Polymer 1.0中缺乏继承性的方法是共享的

您可以尝试将两个自定义元素的常见行为提取到单独的行为中，并在两个自定义元素中实现：

<dom-module id="single-item-tile">

    <style>
        .big {
            --iron-icon-width: 96px;
            --iron-icon-height: 96px;
        }
    </style>

    <template>
        <paper-button on-click="navigateTo">
            <iron-icon class="big" icon="{{icon}}"></iron-icon>
            <h4>{{tile.label}}</h4>
        </paper-button>
    </template>

    <script>
        Polymer({
            is: 'single-item-tile',
            properties: {
                label: String,
                icon: {
                    type: String,
                    value: "check-box-outline-blank"
                },
                tile: Object
            },
            navigateTo: function () {
                window.open(this.tile.url + "?id=" + this.tile.landingPageQuestionnaireItems[0].id);
            }
        });
    </script>

</dom-module>

tile behavior.html:

<script>
    TiteBehavior = {

      properties: {
        label: String,
        icon: {
          type: String,
          value: "content-copy"
        },
        tile: Object
      },
      commonFunction: function() { },
      ....
    };
</script>

<dom-module id="multiple-items-tile">
 ...
 <script>
     Polymer({
        is: 'multiple-items-tile',
        behaviors: [TileBehavior],
     });
 </script>
</dom-mdoule>

<dom-module id="single-item-tile">
 ...
 <script>
     Polymer({
        is: 'single-item-tile',
        behaviors: [TileBehavior],
     });
 </script>
</dom-mdoule>

滴度行为={
特性：{
标签：字符串，
图标：{
类型：字符串，
值：“内容副本”
},
平铺：对象
},
commonFunction:function（）{}，
....
};
...
聚合物({
是：“多项目平铺”，
行为：[TileBehavior]，
});
...
聚合物({
是：'单件瓷砖'，
行为：[TileBehavior]，
});

谢谢！你不能以这种方式共享样式，对吗？好吧，共享样式必须以另一种方式完成。在聚合物中也有一个开放的领域。