polymer/strawman.html

<!-- API strawmanning chicken scratch -->

<script type="module">

  class Polymer.Element extends mixin(HTMLElement, ) {
    connectedCallback() {
      this.ctor = Object.getPrototypeOf(this).constructor;
      this.stampTemplate();
      this.handleAttributes();
      Polymer.RenderStatus.afterNextRender(() => {
        this.installListeners();
      });
    }
    handleAttributes() {
      var attrs = this.ctor.observedAttributes;
      var defaults = {};
      for (var a in attrs) {
        // ...
      }
      Polymer.Data.configureProperties(this, defaults);
    }
    stampTemplate() {
      var dom = Polymer.Data.stampTemplate(this.ctor.template);
      this.appendDom(dom);
    }
    appendDom(dom) {
      this.attachShadow({mode: 'open'}).appendChild(dom);
    }
  }

  var template = Polymer.DomModule.import('my-element', 'template');

  class MyElement extends Polymer.Element {

    static get observedAttributes() { return ['checked'] };

    static get template() { return template; }

    appendDom(dom) {
      this.attachShadow({mode: 'open'}).appendChild(dom);
    }

    handleAttributes() {
      super.handleAttributes();
      Polymer.HostAttributes.setAttribute('aria-role', 'button');
      Polymer.HostAttributes.setAttribute('tabIndex', '0');
    }

    installListeners() {
      Polymer.GestureEventListeners.addMethodListener(this, 'tap', '_handleTap')
    }

    _handleTap(e) {
      //...
    }

  }

  MyElement.createReadOnlyProperty('foo', true);

  customElements.define('my-element', MyElement);

</script>

<!-- ============================== -->

<script type="strawman">

  var template = Polymer.DomModule.import('my-element', 'template');

  class MyElement extends Polymer.Element {

    static get observedAttributes() { return ['checked'] };

    firstConnected() {
      this.takeAttributesAsDefaults();
      this.setHostAttribute('role', 'button');
      var dom = this.stamp(template);
      this.attachShadow({mode: 'open'}).appendChild(dom);
      this.commitProperties();
    }

  }

  MyElement.createReadOnlyProperty('foo');

  customElements.define('my-element', MyElement);

</script>