I've heard a lot of talk about the second coming of Angular and there seems to be a lot of fantastic things coming out of it but I know that Angular 1.0 does not have out of the box integration for Web Components.
I've read up some about Angular2 and that it no longer uses directives. So I was wondering if that means Angular2 is going to make use of Polymer/HTML Templates and other Web Components without any extra integration?
Essentially, a component class is a TypeScript class that includes properties and methods. Properties store data and methods include the logic for the component. Eventually, this class will be compiled into JavaScript.
Web Components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. For example, we can create our new component called <my-web-component> , with its unique styling and functionality, and use it in any JavaScript framework or library .
As a developer, you are free to use React in your Web Components, or to use Web Components in React, or both. Most people who use React don't use Web Components, but you may want to, especially if you are using third-party UI components that are written using Web Components.
update 2
That's now supported https://angular.io/guide/elements
update
There is an ongoing effort (currently only experimental) to change that - Angular elements https://moduscreate.com/blog/angular-elements-ngcomponents-everywhere/
original
Web components can be used in Angular2 applications, but Angular2 components can't be consumed as web components.
AFAIK there are no short-term plans to make Angular2 components actual web components. This was a goal at the beginning but turned out to be too complicated.
With the per component setting ViewEncapsulation.Native
, shadow DOM is used, but that doesn't work too well in Angular2 because the browsers lack features to style the shadow DOM. Polymer uses emulated CSS variables and mixins but Angular2 doesn't yet provide anything like that.
Currently the default setting is ViewEncapsulation.Emulated
where some style scoping is emulated.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With