title: ES6 Custom Elements Inheritance
body: <p>I'm trying to use inheritance in custom elements.</p>
  
  <p>That's my page</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;base-element&gt;&lt;/base-element&gt;
    &lt;language-drop-down&gt;&lt;/language-drop-down&gt;
  
    &lt;script type="module" src="./custom-elements/BaseHTMLElement.js"&gt;&lt;/script&gt;
    &lt;script type="module" src="./custom-elements/language-drop-down/js/LanguageDropDown.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The base custom element</p>
  
  <pre><code>    export default class BaseHTMLElement extends HTMLElement {
  
      get currentDocument() { return document.currentScript.ownerDocument };
  
      constructor(params) {
          super();
  
          this.params = params;
  
          this.attachShadow({ mode: 'open' });
          debugger
  
          // Select the template and clone it. Finally attach the cloned node to the shadowDOM's root.
          // Current document needs to be defined to get DOM access to imported HTML
          if(this.params &amp;&amp; this.params.templateName){
              this.template = this.currentDocument.querySelector(this.params.templateName);
              this.instance = this.template.content.cloneNode(true);
  
              this.shadowRoot.appendChild(this.instance);
          }else{
              let div = document.createElement("DIV");
              div.innerHTML = "element without template";
              this.shadowRoot.appendChild(div);
          }
      }
      connectedCallback() {
          this.loadLocalStrings();
      }
      childrenChangedCallback() {
  
      }
      disconnectedCallback() {
  
      }
      attributeChangedCallback(attrName, oldVal, newVal) {
  
      }
  
      loadLocalStrings() {
  
      }
     }
  
     window.customElements.define('base-element', BaseHTMLElement);
  </code></pre>
  
  <p>And the language drop-down custom element</p>
  
  <pre><code>import * as BaseHTMLElement from '../../BaseHTMLElement.js';
  
  class LanguageDropDown extends BaseHTMLElement {
  
      constructor() {
          super({
              templateName: '#language-drop-down-template'
          });  
      }
      connectedCallback() {
  
          let dropdown = this.shadowRoot.querySelectorAll('.dropdown');        
          $(dropdown).dropdown();
      }
      childrenChangedCallback() {
  
      }
      disconnectedCallback() {
  
      }
      attributeChangedCallback(attrName, oldVal, newVal) {
  
      }
  };
  
  window.customElements.define('language-drop-down', LanguageDropDown);
  </code></pre>
  
  <p>with its template part</p>
  
  <pre><code>&lt;template id="language-drop-down-template"&gt;
      &lt;link href="./custom-elements/language-drop-down/css/languageDropDown.css" rel="stylesheet" /&gt;
  
      &lt;div class="dropdown"&gt;
          &lt;button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
              Dropdown button
          &lt;/button&gt;
          &lt;div class="dropdown-menu" aria-labelledby="dropdownMenuButton"&gt;
              &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
              &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
              &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script type="module" src="../BaseHTMLElement.mjs"&gt;&lt;/script&gt;
  &lt;script type="module" src="./js/languageDropDown.mjs"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Now, in chrome latest release it should work without compiling/using polyfill right?
  My problem is this message in the console</p>
  
  <p>Uncaught TypeError: Class extends value [object Module] is not a constructor or null  </p>
  
  <p>I don't understand where I'm wrong... does someone have an idea?</p>
  
  <p>All that because I would like to avoid using HTML import because it's deprecated and will be removed in M73.</p>
  
  <p>If I use </p>
  
  <pre><code>&lt;script src="./custom-elements/BaseHTMLElement.js"&gt;&lt;/script&gt;
  &lt;link rel="import" href="./custom-elements/language-drop-down/LanguageDropDown.html"&gt;
  </code></pre>
  
  <p>And remove 
      export default BaseHTMLElement ...
      import * as BaseHTMLElement from '../../BaseHTMLElement.js';</p>
  
  <p>it works fine!</p>