EmberJS Extending HTML Element with a Web Component Fail

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

initializers.web-component-initializer.js

// app/initializers/custom-elements.js
class HelloWorld extends HTMLElement {
  constructor() {
    super();
    console.log("constructor() HelloWorld");
    let shadowRoot = this.attachShadow({ mode: "open" });
    shadowRoot.innerHTML = `<p>hello world</p>`;
  }
}

//similar to HelloWorld -- it's simply an extension
class TestingAParagraph extends HTMLParagraphElement {
  constructor() {
    super();
    console.log("constructor() TestingAParagraph");
    let shadowRoot = this.attachShadow({ mode: "open" });
    shadowRoot.innerHTML = `<p>hello Mars</p>`;
  }
}

export function initialize(application) {
  console.log('initialize()');
  window.customElements.define("hello-world", HelloWorld);
  window.customElements.define("testing-a-paragraph", TestingAParagraph, {
    extends: "p"
  });
}

export default {
  initialize
};

templates.application.hbs

<h1>EmberJS Extending HTML Element with a Web Component Fail</h1>
<br>
  <p>Bladiebla</p>
  <hello-world></hello-world>
  <p>A test is coming</p>
  {{log "the test is really coming"}}
  <p is="testing-a-paragraph"></p>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}