Web components

The first public draft of web components was published on May 22, 2012, about 3 years after the release of AngularJS. As mentioned, the web components standard allows us to create custom elements and attach behavior to them. It sounds familiar because we've already used a similar concept in the development of the user interface with AngularJS. Web components sound like an alternative to Angular directives; however, they have a more intuitive API and built-in browser support. They introduced a few other benefits, such as better encapsulation, which is very important, for example, in handling CSS-style collisions.

A possible strategy for adding web components support in AngularJS is to change the directives implementation and introduce primitives of the new standard in the DOM compiler. As Angular developers, we know how powerful and complex the directives API is. It includes a lot of properties, such as postLink, preLink, compile, restrict, scope, and controller, and of course, our favorite transclude. Approved as standard, web components will be implemented on a much lower level in the browsers, which introduces plenty of benefits, such as better performance and native API.

During the implementation of web components, a lot of web specialists met with the same problems the AngularJS team did when developing the directives API, and came up with similar ideas. Good design decisions behind web components include the content element, which deals with the infamous transclusion problem in AngularJS. Since both the directives API and web components solve similar problems in different ways, keeping the directives API on top of web components would have been redundant and added unnecessary complexity. This is why the Angular core team decided to start from the beginning by building a framework compatible with web components and taking full advantage of the new standard. Web components involve new features; some of them are not yet implemented by all browsers. In case our application is run in a browser which does not support any of these features natively, Angular emulates them. An example for this is the content element polyfilled with the ng-content directive.