vaadin-demo-shadow-dom-renderer.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="vaadin-light-dom-helper.html">
<link rel="import" href="../vaadin-themable-mixin/vaadin-themable-mixin.html">

<dom-module id="vaadin-demo-shadow-dom-renderer">
  <template>
    <style>
      :host {
        display: block;
        padding: 1.5em;
      }
    </style>
  </template>

  <script>
  (() => {
    'use strict';
    let instanceIndex = 0;
    class VaadinDemoShadowDomRenderer extends Vaadin.ThemableMixin(Polymer.Element) {
      static get is() {
        return 'vaadin-demo-shadow-dom-renderer';
      }

      static get properties() {
        return {
          id: {
            type: String,
            value: () => {
              return `vaadin-demo-shadow-dom-${instanceIndex++}`;
            }
          },
        };
      }

      ready() {
        super.ready();
        Vaadin.LightDomHelper.querySelectorAsync('slot', this)
          .then(slot => {
            return Vaadin.LightDomHelper.querySlotContentAsync('template', slot);
          })
          .then(template => {
            this._showDemo(template);
          })
          .catch(error => {
            throw new Error('vaadin-demo-iframe-renderer requires a <template> child');
          });
      }

      _showDemo(template) {
        window.ShadyCSS.prepareTemplate(template, this.id);
        const dom = this.getRootNode().host._stampTemplate(template);
        this.shadowRoot.appendChild(dom);
      }
    }
    customElements.define(VaadinDemoShadowDomRenderer.is, VaadinDemoShadowDomRenderer);
  })();
  </script>

</dom-module>