lose-lose-web-components.md

Lose-lose situation with Web Components.

Polymer is the leading implementation of Web Components and functionality on top of Web Components.

If this is Web Components spec, it's horrible. Lose

<template>
    <div>[[name.first]] [[name.last]]</div>
</template>

<address-card
        address="{{primaryAddress}}"></address-card>

<name-tag name="[[name]]"></name-tag>

<input value="{{firstName::change}}">

<a href$="{{hostProperty}}">

<div>[[_formatName(first, last, title)]]</div>

Because this introduces incomplete JS-like language with arbitrary limitations

If this is not Web Components spec, it's still Lose

If it's just Polymer, it's still horrible. It basically shows that for anything remotely complex you need to invent your ways around the spec's limitations.

And then this:

<template>
    <div>[[arrayItem(myArray.*, 0, 'name')]]</div>
    <div>[[arrayItem(myArray.*, 1, 'name')]]</div>
</template>

<div style$="color: {{myColor}};">

is just as "standardized" and "compatible" with other libraries/frameworks as

<div *ngFor="let hero of heroes">{{hero.name}}</div>
<input #heroInput> {{heroInput.value}}