如何使用Polymer扩展多个元素 [英] How to extend multiple elements with Polymer

问题描述

我知道多重继承/构成上存在这个问题.但是，似乎这个问题更多地是关于如何重用其他元素中多个现有元素的功能.显然，解决方案是mixin.

I know there is this question on multiple inheritance/composition. However, it seems like this question is more about how to reuse functionality from multiple existing elements in other elements. And obviously, the solution for that are mixins.

我想知道，如何在不真正借用现有功能的情况下真正装饰"现有元素.我们知道可以使用extends这个属性来通过Polymer扩展现有元素.

I would like to know, how I can actually "decorate" existing elements without really borrow functionality from them. We know there is this extends property one can use to extend an existing element with Polymer.

因此，使普通的<button>表现得像mega-button一样简单，只需附加<button is="mega-button">并为其编写一个组件.但是事实证明，不可能extend多个元素.所以extends="foo bar"之类的东西不起作用.如果我想构建一个可以实际应用于不同元素的Web组件怎么办?

So making a normal <button> behave like a mega-button is as simple as attaching <button is="mega-button"> and write a component for it. But it turns out, that it's not possible to extend multiple elements. So something like extends="foo bar" doesn't work. What if I want to build a web component, that can actually be applied to different elements?

例如，我不想只用mega-button扩展<button>元素，还可能想扩展<a>元素，使其看起来也像mega-button一样?

For example, I don't want to only extend <button> elements with mega-button but probably also an <a> element so that it looks like and behaves like a mega-button too?

就我所知，mixin方法并没有真正的帮助(因为就我所知)，因为它们仅能为不同的Web组件提供共享逻辑而已.这意味着，您将创建多个组件，并重用mixin中的逻辑(打包在mixin中).

The mixin approach doesn't really help here (as far as I get it), because they do nothing more then providing shared logic for different web components. That means, you create multiple components, and reuse logic (packed in a mixin) from a mixin.

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

What I need is a way to create one web component that can be applied to multiple elements.

有什么办法解决吗?

更新

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

Addy answered with some approaches to handle that use case. Here's a follow up question based on one approach

另外一个在是否可以在Polymer中跨Web组件(和导入)共享mixin?

更新2

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

I've written an article and concludes my experiences and learnings about inheritance and composition with polymer: http://pascalprecht.github.io/2014/07/14/inheritance-and-composition-with-polymer/

推荐答案

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

If you need to have just a single import that has support for being applied to multiple elements, your element could include multiple element definitions which may or may not take advantage of Polymer.mixin in order to share functionality between your decorating elements.

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

So pascal-decorator.html could contain Polymer element definitions for <pascal-span> and <pascal-button>, both of which mixin logic from some object defined within pascal-decorator.html. You can then do <button is="pascal-button"> and <button is="pascal-span"> whilst the logic for doing so remains inside the same import.

另一种选择(如果您严格要在一个自定义元素中完成所有操作，即imo，这会使它变得不太干净)是执行诸如检查要扩展的元素类型的操作，这可以按照您自己的方式进行链接至，或作为元素注册过程的一部分进行检查.

The alternative (if you strictly want to do this all in one custom element, which imo, makes this less clean) is to do something like checking against the type of element being extended, which could either be done in the manner you linked to or by checking as part of your element registration process.

通常，我个人更喜欢弄清楚我可能需要在可以修饰的元素之间共享什么逻辑，将功能隔离到元素中，然后将其导入对标签有了解的专用元素中(例如，<addy-video>等).

In general, I personally prefer to figure out what logic I may need to share between elements that could be decorated, isolate that functionality into an element and then just import them into dedicated elements that have knowledge about the tag (e.g <addy-button>, <addy-video> etc).

这篇关于如何使用Polymer扩展多个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！