From: Brian Di Palma [mailto:[email protected]]
> Are they appreciatively more powerful then just building Angular directives
> though?
>
> Do they enable any functionality that you could not access without the custom
> elements spec?
Yes. There are at least two major benefits that I can see:
1) They allow you to create new HTMLElement-derived interfaces which are
associated with the custom elements, so that you can do e.g.
`document.querySelector("x-flipbox").toggle()` or
`document.querySelector("x-flipbox").flipped` and so on.
2) They alert the parser of this new element, so that if you do
`document.body.innerHTML =
"<x-flipbox><div>Front</div><div>Back</div></x-flipbox>"`, this will be
appropriately parsed so as to create a new flipbox with the associated behavior
and interface.
This effectively allows you to use the web's native widget abstraction, e.g.
elements, instead of inventing your own. With something like jQuery UI or
Angular, you need to access properties and methods through arcane invocations,
e.g.
$(document.querySelector(".my-slider")).slider("option", "disabled", false);
instead of
document.querySelector(".my-slider").disabled = false;
And if you add new elements via innerHTML, you'll have to do
$(elementThatHadItsInnerHTMLChanged).find(".make-me-a-slider").slider();
to add the slider behavior, since there is no parser hook.
(As for the Angular comparison, Angular tries to push you toward manipulating
controllers and $scope objects, and never touching the DOM or DOM-esque widgets
directly, so it's hard to really make such a comparison. Angular, more so than
Polymer, seems to me like a good unifying cowpath to pave in the future.)
