[英]How to extend multiple elements with Polymer
我知道有关于多重继承/组合的这个问题。 但是,似乎这个问题更多的是关于如何从其他元素中的多个现有元素重用功能。 显然,解决方案就是mixins。
我想知道,如何在不真正借用现有元素的情况下实际“装饰”现有元素。 我们知道可以使用这个extends
属性来扩展Polymer的现有元素。
因此,使普通的<button>
表现得像一个mega-button
就像附加<button is="mega-button">
并为其编写一个组件一样简单。 但事实证明, extend
多个元素是不可能的。 所以像extends="foo bar"
类的东西不起作用。 如果我想构建一个可以实际应用于不同元素的Web组件,该怎么办?
例如,我不想只使用mega-button
扩展<button>
元素,但也可能只是一个<a>
元素,以便它看起来像行为像一个mega-button
?
mixin方法在这里并没有真正帮助(据我所知),因为它们不再为不同的Web组件提供共享逻辑。 这意味着,您可以创建多个组件,并从mixin重用逻辑(打包在mixin中)。
我需要的是一种创建一个可以应用于多个元素的Web组件的方法。
知道如何解决这个问题吗?
UPDATE
Addy回答了一些处理该用例的方法。 这是基于一种方法的后续问题
如何在Polymer中注册我自己的元素时,如何找出要扩展的元素
另一个是否有可能在Polymer中分享Web组件(和导入)中的mixin?
更新2
我写了一篇文章,总结了我对聚合物遗传和组成的经验和学习: http : //pascalprecht.github.io/2014/07/14/inheritance-and-composition-with-polymer/
如果您只需要一个支持应用于多个元素的导入,那么您的元素可能包含多个元素定义,这些定义可能会也可能不会利用Polymer.mixin
来共享您的装饰元素之间的功能。
所以pascal-decorator.html
可以包含<pascal-span>
和<pascal-button>
Polymer元素定义,两者都是pascal-decorator.html
定义的某个对象的逻辑混合。 然后你可以执行<button is="pascal-button">
和<button is="pascal-span">
同时这样做的逻辑仍然在同一个导入中。
替代方案(如果您严格要在一个自定义元素中执行此操作,imo,使其不那么干净)是执行诸如检查要扩展的元素类型之类的操作,这可以以链接到的方式完成,也可以通过检查元素注册过程的一部分。
一般来说,我个人更喜欢弄清楚我可能需要在可以修饰的元素之间共享什么逻辑,将该功能分离为元素然后将它们导入到具有标记知识的专用元素中(例如<addy-button>
, <addy-video>
等)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.