Использование веб-компонента без регистрации в качестве пользовательского элемента?

Question

Можно ли создать экземпляр веб-компонента, не зарегистрировав его на CustomElementRegistry? рассмотрим простой компонент:

export class MyCustomElm extends HTMLElement {

  constructor() {
    super();

    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot!.innerHTML = `
      <div>Hello world</div>
    `;
  }
}

// Is it really required?
customElements.define('my-custom-elm', MyCustomElm);

Я использую storybook для создания библиотеки веб-компонента. Все примеры / демонстрации являются веб-компонентами. Код всегда будет использовать синтаксис конструктора, т.е. new MyCustomElm() для инициализации компонента. Он никогда не будет использоваться через обычный HTML.

Я попытался не зарегистрировать элемент, но он, похоже, не работает. Выдает исключение, если конструктор вызывается без регистрации компонента. Поскольку существует множество демонстрационных компонентов, быстро становится громоздким придумывать уникальные имена.

С другой стороны, есть ли способ использовать сборник рассказов для веб-компонентов без необходимости установки дополнительных веб-компонентов для историй? (я пробовал манипуляции с DOM, но это также выходит из-под контроля.)

Answer 1

Да, если вы хотите создать экземпляр пользовательского элемента с помощью new, вам нужно сначала определить его с помощью customElements.define().

Это потому, что ваш пользовательский элемент является производным от HTMLElement, поэтому он должен быть частью реестра пользовательских элементов при вызове super() из метода constructor().

Если вы удалите части кода extends HTMLElement и super() из определения класса, вы сможете создать его экземпляр с помощью new, но это будет стандартный объект Javascript, а не пользовательский элемент HTML.