@polymer/polymer/test/unit/dom-bind-elements1.html

The Polymer library makes it easy to create your own web components. Give your element some markup and properties, and then use it on a site. Polymer provides features like dynamic templates and data binding to reduce the amount of boilerplate you need to

<!--
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<script>
  Polymer({
    is: 'x-basic',
    properties: {
      notifyingvalue: {
        notify: true
      }
    }
  });
</script>

<dom-module id="x-content">
  <template><div id="container"><slot id="slot"></slot></div></template>
  <script>
    Polymer({
      is: 'x-content'
    });
  </script>
</dom-module>

<dom-module id="x-attach-dom-bind">
  <template><x-content id="local"></x-content></template>
  <script>
    Polymer({
      is: 'x-attach-dom-bind',

      attached: function() {
        var domBind = document.createElement('dom-bind');
        var template = document.createElement('template');

        domBind.appendChild(template);

        var span = document.createElement('span');
        span.innerHTML = '{{hello}}';

        template.content.appendChild(span);
        domBind.hello = 'hey';

        this.$.local.appendChild(domBind);
      }
    });
  </script>
</dom-module>

<dom-module id="x-compose">
  <template><x-content id="local"></x-content></template>
  <script>
    Polymer({
      is: 'x-compose'
    });
  </script>
</dom-module>

<script>
  Polymer({
    is: 'x-produce-a',
    properties: {
      bindToText: {
        notify: true,
        value: 'this text is bound'
      }
    }
  });
</script>