如何使用Polymer扩展多个元素

Question

如何使用Polymer扩展多个元素

7

我知道有一个关于多重继承/组合的问题。然而，这个问题似乎更多地涉及如何在其他元素中重用多个现有元素的功能。显然，这种情况下的解决方案是 mixins。

我想知道，如何实际“装饰”现有元素，而不是从它们那里借用功能。我们知道在 Polymer 中可以使用 extends 属性来扩展现有元素。

因此，让普通的 <button> 表现得像 mega-button 一样简单，只需添加 <button is="mega-button"> 并编写其组件。但事实证明，无法 extend 多个元素。所以像 extends="foo bar" 这样的东西行不通。如果我想构建一个 Web 组件，可以应用于不同的元素呢？

例如，我不仅想使用 mega-button 扩展 <button> 元素，还可能想扩展 <a> 元素，以便其看起来和表现得像 mega-button 一样？

混入方法在这里并没有太大帮助（就我所知），因为它们不会提供不同 Web 组件的共享逻辑。也就是说，您需要创建多个组件，并从混入中重用逻辑。

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

有任何解决方法吗？

更新

Addy 提出了一些处理该用例的方法。以下是基于其中一种方法的后续问题：如何在注册自己的 Polymer 中找出将要被扩展的元素？

还有一个关于在Polymer中是否可能在Web组件（和导入）之间共享mixin的问题。

更新2

我写了一篇文章，总结了我在使用Polymer时的继承和组合经验和教训：http://pascalprecht.github.io/2014/07/14/inheritance-and-composition-with-polymer/

- Pascal Precht

我在这里找到了另一种方法：https://github.com/mvaldetaro/twbs-buttons。该项目的作者通过发布“tag”属性来提供API，让您可以指定应使用的实际HTML标记。在Web组件实现中，您可以看到他检查不同的标记名称并相应地使用不同的模板内容。在我看来，这绝对*不是*正确的方法。 - Pascal Precht

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- addyo · Accepted Answer

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

因此，pascal-decorator.html可以包含<pascal-span>和<pascal-button>的Polymer元素定义，两者都混合了在pascal-decorator.html中定义的某个对象的逻辑。然后，您可以使用<button is="pascal-button">和<button is="pascal-span">，而执行此操作的逻辑仍然保留在相同的导入中。

另一种选择（如果您严格要求在一个自定义元素中完成所有操作，我认为这样做不太干净）是检查被扩展的元素类型，可以通过链接到的方式或作为元素注册过程的一部分进行检查。

总的来说，我个人更喜欢找出可能需要在可装饰元素之间共享的逻辑，将其隔离到一个元素中，然后只需将它们导入到具有关于标记的知识的专用元素中（例如<addy-button>、<addy-video>等）。