Comment by nostrademons

I think this post is missing something in its description of Web Components: the fundamental difference between a JS-based framework like React and a Web Components-based framework like Polymer is that the former takes JS objects as primitives and the DOM as an implementation artifact, while the latter takes the DOM as a primitive and JS as an implementation artifact. You cannot wrap your head around Web Components and give both it and JS frameworks a fair shake until you can make this mental shift in perspective fluently.

The line in the post where "You can't even do something as basic as that with Web Components.":

  var MyToolbar = require('shared-components/toolbar');

In fact has a direct analogue with HTML imports:

  <link rel="import" href="shared-components/toolbar.html">

And that's key to understanding Web Components. The idea of the standard is that you can now define your own custom HTML elements, and those elements function exactly like the DOM elements that are built into the browser. This is a key strategic point: they function exactly like the DOM elements that are built into the browser because Google/Mozilla/Opera/et al hope to build the popular ones into the browser eventually, just like we've gotten <input type=date> and <details>/<summary> based on common web usage patterns.

A number of the other code samples in the article also have direct analogues in Polymer as well. For example, the App/Toolbar example halfway down the page would be this:

  <polymer-element name="Toolbar" attributes="number">
    <template>
      <div>
        <button value="increment" on-click="{{increment}}">
        <button value="decrement" on-click="{{decrement}}">
      </div>
    </template>
    <script>
      Polymer('toolbar', {
        number: 0,
        increment: function() { this.number++; }
        decrement: function() { this.number--; }
      });
    </script>
  </polymer-element>

  <polymer-element name="App">
    <template>
      <div>
        <span>{{toolbar.number}}</span>
        <Toolbar number=0 id="toolbar"></Toolbar>
      </div>
    </template>
    <script>
      Polymer('App', {
        created: function() {
          this.toolbar = this.$.toolbar;
        }
      });
    </script>
  </polymer-element>

You can decide for yourself whether you like that or you like the Bloop example more - my point with this post is to educate, not evangelize - but the key point is that you can define your own tags and elements just like regular DOM elements, give them behavior with Javascript, make them "smart" through data-binding so you don't have to manually wire up handlers, and then compose them like you would compose a manual HTML fragment.