如何使用Polymer扩展多个元素

时间:2014-06-11 07:59:59

标签: polymer web-component

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

我想知道,我怎么能真正装饰"现有元素没有真正借用它们的功能。我们知道有一个extends属性可用于使用Polymer扩展现有元素。

因此,使正常<button>行为与mega-button相似就像附加<button is="mega-button">并为其编写组件一样简单。但事实证明,extend多个元素是不可能的。所以类似extends="foo bar"之类的东西并不起作用。如果我想构建一个可以实际应用于不同元素的Web组件,该怎么办?

例如,我不想只使用<button>扩展mega-button个元素,但也可能只扩展<a>元素,以使其看起来像{{1}也是吗?

mixin方法在这里并没有什么帮助(据我所知),因为它们不再为不同的Web组件提供共享逻辑。这意味着,您可以创建多个组件,并重用混合中的逻辑(打包在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

我写了一篇文章,总结了我对聚合物遗传和成分的经验和学习:http://pascalprecht.github.io/2014/07/14/inheritance-and-composition-with-polymer/

1 个答案:

答案 0 :(得分:2)

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

因此pascal-decorator.html可以包含<pascal-span><pascal-button>的Polymer元素定义,这两个定义混合来自pascal-decorator.html中定义的某个对象的逻辑。然后,您可以执行<button is="pascal-button"><button is="pascal-span">,而执行此操作的逻辑仍保留在同一导入中。

备选方案(如果您严格要在一个自定义元素中执行此操作,imo,使其不那么干净)是执行类似于检查要扩展的元素类型的操作,这可以通过您的方式完成linked to或通过检查元素注册过程的一部分。

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