使用Web组件而不注册为自定义元素？

Question

是否可以实例化Web组件而无需将其注册到 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);

我正在使用故事书来构建Web组件库。所有示例/演示都是Web组件。该代码将始终使用构造函数语法，即new MyCustomElm()初始化组件。永远不会通过纯HTML使用它。

我试图不注册该元素，但它似乎不起作用。如果在不注册组件的情况下调用了构造函数，则会引发异常。由于演示组件很多，因此想出唯一的名称很快变得很麻烦。

或者，是否有任何方法可以将Storybook用于Web组件，而不必为故事设置额外的Web组件？ （我尝试了DOM操作，但它也一发不可收拾。）

Answer 1

是的，如果要使用实例化Custom Element new，则需要首先使用进行定义customElements.define()。

这是因为您的自定义元素是从HTMLElement派生的，因此super()从该constructor()方法调用时，它必须是“自定义元素注册表”的一部分。

如果从类定义中删除extends HTMLElement和super()代码部分，则可以使用实例化它，new但是它将是标准Javascript对象，而不是自定义HTML元素。