Polymer 3 * Extend another polymer element * Override its template * Use its properties

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://polygit.org/webcomponentsjs+1.0.0-rc.5/components/webcomponentsjs/webcomponents-loader.js"></script>
    
    <script type="module" src="child-class.js"></script>
  </head>
  <body></body>
    <child-class></child-class>
  </body>
</html>

import {Element as PolymerElement} from "https://unpkg.com/@polymer/polymer@3.0.0-pre.1/polymer-element.js"

  export class BaseClass extends PolymerElement {
    static get properties () {
      return {
        myString: {
          type: String,
          value: ""
        }
      };
    }
    ready(){
      super.ready();
      this.myString ="I am a string initialized in BaseClass";
    }
    static get template() {
      return `
        This content has been inherited from BaseClass.
        `
    }
  }
  // Register the new element with the browser
  customElements.define('base-class', BaseClass);

import {Element as PolymerElement} from "https://unpkg.com/@polymer/polymer@3.0.0-pre.1/polymer-element.js"
import {BaseClass as BaseClass} from "./base-class.js"

class ChildClass extends BaseClass {
  
  static get template() {
    return `
    <p>I have my own template so I won't get the template from BaseClass.
    <p>I can still use BaseClass's properties though. Watch:
    <p>
    [[myString]]
    `;
  }
}
// Register the new element with the browser
customElements.define('child-class', ChildClass);