polymer - 如何使用 Polymer 扩展多个元素

Question

我知道 multiple inheritance/composition 上有这个问题.但是，这个问题似乎更多地是关于如何在其他元素中重用多个现有元素的功能。显然，解决方案是混合。

我想知道，如何在不真正借用现有元素的情况下实际“装饰”现有元素。我们知道有这个 extends可以使用属性来使用 Polymer 扩展现有元素。

所以做一个正常的<button>表现得像 mega-button就像附加 <button is="mega-button"> 一样简单并为其编写一个组件。但事实证明，这是不可能的 extend多个元素。所以像 extends="foo bar"不起作用。如果我想构建一个 web 组件，它实际上可以应用于不同的元素怎么办？

例如，我不想只扩展 <button>带有 mega-button 的元素但也可能是 <a>元素，使其看起来和行为都像 mega-button也？

mixin 方法在这里并没有真正的帮助(据我所知)，因为除了为不同的 Web 组件提供共享逻辑之外，它们什么都不做。这意味着，您可以创建多个组件，并重用 mixin 中的逻辑(打包在 mixin 中)。

我需要的是一种创建可应用于多个元素的 Web 组件的方法。

知道如何解决这个问题吗？

更新

Addy 回答了一些处理该用例的方法。这是基于一种方法的后续问题

How to find out what element is going to be extended, while registering my own in Polymer

另一个在 Is it possible to share mixins across web components (and imports) in Polymer?

更新 2

我写了一篇文章，总结了我对 polymer 的继承和组合的经验和学习:http://pascalprecht.github.io/2014/07/14/inheritance-and-composition-with-polymer/

Answer 1

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

所以 pascal-decorator.html 可以包含 <pascal-span> 和 <pascal-button> 的 Polymer 元素定义，这两者都是来自 pascal-decorator.html 中定义的某个对象的混合逻辑。然后，您可以执行 <button is="pascal-button"> 和 <button is="pascal-span">，同时这样做的逻辑保留在同一个导入中。

另一种选择(如果你严格地想在一个自定义元素中完成这一切，imo，使这不那么干净)是做一些事情，比如检查正在扩展的元素的类型，这可以按照你 linked to 的方式完成，也可以通过检查作为元素注册过程的一部分。

一般来说，我个人更喜欢弄清楚我可能需要在可以装饰的元素之间共享什么逻辑，将该功能隔离到一个元素中，然后将它们导入到具有标签知识的专用元素中(例如 <addy-button> 、 <addy-video> 等) .