Расширенные пользовательские элементы не работают в Angular 2+

Question

Я не могу заставить Angular (2+, а не AngularJS) хорошо играть с моим расширенным пользовательским элементом, который определен так:

  class FancyButton extends HTMLButtonElement {
    connectedCallback() {
      this.innerText = `I'm a fancy-button!`;
      this.style.backgroundColor = 'tomato';
    }
  }

  customElements.define("fancy-button", FancyButton, {
    extends: "button"
  });

И используется так:

<button is="fancy-button">Fancy button here</button>

Определение полностью соответствует веб-стандартам согласно этому ресурсу Google Developer: https://developers.google.com/web/fundamentals/web-components/customelements#extend

Он отлично работает в ванильных веб-настройках и в React, но Angular игнорирует его и показывает стандартную кнопку, очевидно игнорируя атрибут is = "fancy-button" .

Вот stackblitz , показывающий это в действии. Одна необычная кнопка находится за пределами угловой области (index.html) и работает нормально. Другая кнопка находится внутри угловой области (app.component.html) и НЕ работает.

Почему?