与Web组件的角度集成 - 路线图

时间:2017-01-11 12:27:11

标签: angular polymer web-component

我想知道是否有关于Angular(2.0+)何时/如何计划完全支持本机Web组件(https://www.webcomponents.org/)的路线图。

是的,我知道有ViewEncapsulation.NativeCUSTOM_ELEMENTS_SCHEMA。但我在问是否有计划完全支持Web组件。所以我们可以使用谷歌聚合物(https://www.polymer-project.org/)等真棒库。

我知道有一个vaadin lib(https://github.com/vaadin/angular2-polymer)来处理集成。但同样:我说的是原生支持。

1 个答案:

答案 0 :(得分:1)

嗯,这就是webcomponents的美妙之处。如果浏览器本身支持它们,它们将在任何框架中本地工作。它与在Angular中使用<input>标记相同。浏览器呈现它,而不是框架。

您需要做的就是告诉Angular您使用CUSTOM_ELEMENTS_SCHEMA时不知道的自定义元素。

现在,当谈到像Polymer这样的web组件库时,这是一个不同的故事。

Polymer 1.x使用自定义元素v0规范,并依赖于许多自定义逻辑来通过Polymer.dom()来操作DOM。如果没有第三方支持,它与Angular不兼容,因为Angular使用本机DOM操作方法而不是Polymer。它将从不支持Angular,因为v0规范不是浏览器正在实现的。

Polymer 2.x使用自定义元素v1规范,浏览器正在实现(或已经实现)。它的行为与常规元素一样,因此它自然受到Angular的支持。

像Polymer这样的库提供的任何额外的糖,例如模板冲压和数据绑定,可能无法原生工作。

TL; DR;

Angular本身支持遵循v1规范的web组件。

构建在webcomponents之上的库(如Polymer)可能会提供在Angular中不起作用的功能。

如果您想同时使用Polymer和Angular,请关注Polymer 2.x,它实现了v1规范。