Polymer 3 * Extend another polymer element * Inherit its template * Show what calling super.ready does * Show inheritance of properties

<head>
  <!-- Load the polyfills -->
  <script src="https://polygit.org/polymer+:2.0-preview/webcomponentsjs+:v1/shadydom+webcomponents+:master/shadycss+webcomponents+:master/custom-elements+webcomponents+:master/components/webcomponentsjs/webcomponents-loader.js"></script>
  <link rel="import" href="parent.html">
</head>
<body>
  <parent-e></parent-e>
</body>

<!-- import polymer-element -->
<link rel="import" href="https://polygit.org/components/polymer/polymer-element.html">
  <link rel="import" href="child.html">

<dom-module id="parent-e">
  <template>
    <child-e response="[[foo.response]]"></child-e>
  </template>
  
  <script>
    class Parent extends Polymer.Element {
      static get is() {
        return "parent-e";
      }
      static get properties() {
        return {
          foo: {
            type: Object,
            value: {},
            // value: {response: "a"},
            notify: true,
          },
        }
      }
      ready() {
        super.ready();
      }
    }
    customElements.define(Parent.is, Parent);
  </script>
</dom-module>

<!-- import polymer-element -->
<link rel="import" href="https://polygit.org/components/polymer/polymer-element.html">
<dom-module id="child-e">
  <template>
    <p>child value: [[response]]</p>
  </template>
  
  <script>
    class Child extends Polymer.Element {
      static get is() {
        return "child-e";
      }
      static get properties() {
        return {
          response: {
            type: String,
            value: "child",
            notify: true,
          },
        }
      }
      ready() {
        super.ready();
      }
    }
    customElements.define(Child.is, Child);
  </script>
</dom-module>