Search code examples
angularpolymerweb-component

Angular integration with web components - Roadmap


I was wondering if there is a roadmap published on when/how Angular (2.0+) is planning to fully supporting native web components (https://www.webcomponents.org/).

Yes, I'm aware that there is a ViewEncapsulation.Native and a CUSTOM_ELEMENTS_SCHEMA. But I'm asking if there is a plan to fully support web components. So we can use awesome libraries like google polymer (https://www.polymer-project.org/).

I know that there is a vaadin lib (https://github.com/vaadin/angular2-polymer) that handles the integration. But again: I'm talking about native support.


Solution

  • Well, that's kind of the beautiful thing about webcomponents. If the browser supports them natively, they will work natively in any framework. It would be the same as using an <input> tag in Angular. The browser renders it, not the framework.

    All you need to do is tell Angular you are using custom elements it doesn't know about with CUSTOM_ELEMENTS_SCHEMA.

    Now, when it comes to webcomponent libraries like Polymer, that's kind of different story.

    Polymer 1.x uses the custom element v0 spec, and relies on a lot of custom logic to manipulate the DOM through Polymer.dom(). It is not compatible with Angular without third-party support, because Angular uses native DOM manipulation methods instead of Polymer's. It will never be supported by Angular, because the v0 spec is not what browsers are implementing.

    Polymer 2.x uses the custom element v1 spec, which browsers are implementing (or have already implemented). It behaves just like regular elements, so it naturally is supported by Angular.

    Any extra sugar that libraries like Polymer give, such as template stamping and databinding, may not work natively.

    TL;DR;

    Angular natively supports webcomponents following the v1 spec.

    Libraries (such as Polymer) that build on top of webcomponents may offer features that don't work in Angular.

    If you want to use Polymer and Angular together, focus on Polymer 2.x, which implements the v1 spec.