Polymer Elements vs Angular Directives Polymer Elements vs Angular Directives javascript javascript

Polymer Elements vs Angular Directives


You're really asking two different things, "What's the differences when implementing/building components vs. using one?"

Consuming components

In the foreseeable future, you use both together. It doesn't matter what technology/library a web component is built with or what vendor makes it. Simply bower install (or similar) and use the components that make sense for your app.

What matters is that everything will be DOM, meaning elements will work seamlessly together. The interop story is great. Here's a POC of an Angular directive data-bound to a Polymer element: http://ebidel.github.io/polymer-experiments/polymer-and-angular/together/


Building components

Building elements is a different story at the moment. Polymer's approach is to center itself around all things web components. Angular was built before the time of web components, so things are a bit different.

  • Angular directives are a way to build custom tags/components. Polymer and the Custom elements specification is the standards-based way to do that.

  • How you build a Polymer-element is extremely declarative. Angular directives are mostly defined in JS (with the ability to reference a template file).

  • Because Polymer elements using Custom elements, inheritance is simple. I'm not sure of the inheritance story in Angular directives/

  • Polymer elements use Shadow DOM. This gives them encapsulation of DOM and CSS. Styles you define in your element don't bleed out and page styles don't bleed in. I could be wrong, but Angular directives do not have any notion of style encapsulation. It's a hard problem that the Shadow DOM spec gives us for free.

  • The data binding concepts are similar

would angular directives be implemented in terms of polymer elements

  • Eventually, Angular will adopt some of the evolving Web Component standards. This will be true for all frameworks. Ember just made their 2014 plans known, which include web components. For example, Angular.dart already uses Shadow DOM for directives.

  • Polymer elements (custom elements) are interoperable with other custom elements by default. This is because they're just DOM. DOM elements work well together :)

Hope this helps!