Polymer 如何用聚合物扩展多元素

Polymer 如何用聚合物扩展多元素,polymer,web-component,Polymer,Web Component,我知道有这个问题。然而,这个问题似乎更多的是关于如何在其他元素中重用来自多个现有元素的功能。很明显,解决这个问题的办法是混合 我想知道,我如何才能真正“装饰”现有的元素,而不真正借用它们的功能。我们知道有一个扩展属性可以用来用聚合物扩展现有元素 因此,使一个普通的像一个巨型按钮一样工作,只需附加并为其编写一个组件即可。但事实证明,扩展多个元素是不可能的。所以像extends=“foo bar”这样的东西不起作用。如果我想构建一个可以应用于不同元素的web组件,该怎么办 例如,我不想只使用mega

我知道有这个问题。然而,这个问题似乎更多的是关于如何在其他元素中重用来自多个现有元素的功能。很明显,解决这个问题的办法是混合

我想知道,我如何才能真正“装饰”现有的元素,而不真正借用它们的功能。我们知道有一个
扩展
属性可以用来用聚合物扩展现有元素

因此,使一个普通的
像一个
巨型按钮一样工作,只需附加
并为其编写一个组件即可。但事实证明,扩展多个元素是不可能的。所以像
extends=“foo bar”
这样的东西不起作用。如果我想构建一个可以应用于不同元素的web组件,该怎么办

例如,我不想只使用
mega-button
扩展
元素,还可能扩展

还有一个

更新2


我写了一篇文章,总结了我关于聚合物继承和合成的经验和教训:

如果您只需要一个支持应用于多个元素的导入,您的元素可以包含多个元素定义,这些元素定义可以利用也可以不利用
Polymer.mixin
,以便在装饰元素之间共享功能

因此
pascal decorator.html
可以包含
的聚合元素定义,这两个元素都从
pascal decorator.html
中定义的某个对象中混入逻辑。然后,您可以执行
,而执行此操作的逻辑仍保留在同一导入中

另一种方法(如果您严格地希望在一个自定义元素中完成这一切,imo会让这变得不那么干净)是执行类似于检查被扩展元素类型的操作,这可以通过您的方式完成,也可以通过检查作为元素注册过程的一部分来完成


一般来说,我个人更喜欢弄清楚我可能需要在可以修饰的元素之间共享什么逻辑,将该功能隔离到一个元素中,然后将它们导入到了解标记的专用元素中(例如
等)。

我在这里找到了另一种方法:。此项目的作者通过发布一个
标记
属性来提供和API,该属性允许您指定应该使用的实际html标记。在web组件实现中,您可以看到他检查不同的标记名,并相应地使用不同的模板内容。在我看来绝对不是这样。艾迪,谢谢你详细的回答。虽然我了解处理这种情况的不同方法,但我仍然不确定在某些情况下这是否是我们想要的。我认为twbs按钮就是一个完美的例子。您可以在应用程序中使用锚定标记或按钮元素,这些元素的外观(可能的行为)类似于twitter按钮。所以你想要的是能够做一些事情,比如
。这真的是为这些不同情况创建元素的首选方法吗<代码>twbs按钮
twbs链接
?围绕这一点的最佳实践仍在不断发展:)了解是否有一个具体的示例可以帮助您实现目标(您试图用什么功能装饰这些元素?)。如果想要扩展行为(例如交互/点击/触摸),那么使用相同的元素来支持通用扩展用例应该可以工作,而不需要检查类型。视觉是需要进一步护理的地方,这就是我需要考虑特定元素的地方。事实上,我和这里描述的情况完全相同。我正在尝试为Ionic框架构建web组件。还有一个按钮组件(当然,它只是一个css类),具有主题化支持等。因此,实际上,目前它完全是关于css的,不需要任何自定义元素,但在某些情况下,当组件与
元素一起使用时,我可能需要JS逻辑。我认为在这样的情况下使用
is=“”
语法是非常有意义的。所以我现在的想法是只使用
is=“”
,让我的组件
主题感知
,这样我就能够将我的元素扩展应用到像
等常见元素上。这种方法似乎是合法的。