window.customElements.define()和document.registerElement()之间有什么区别？

Question

我一直在阅读关于Web组件（原生，没有Polymer）的教程。我看到了两种注册组件的方式，我有点困惑该用哪种。对于第二种方式，在vscode中实际上会收到一个TypeScript错误：[ts] Property 'registerElement' does not exist on type 'Document'. Did you mean 'createElement'?

/**
 * App
 */
export class App extends HTMLElement {

    constructor() {
        super();
    }

    connectedCallback() {
        this.innerHTML = this.template;
    }

    get template() {
        return `
        <div>This is a div</div>
        `;
    }
}

// What is the difference between these two methods?
window.customElements.define('vs-app', App);
document.registerElement('vs-app', App);

- Adrian Moisa

---

根据MDN的说明，registerElement已被弃用，请勿使用。 - jpaugh

Answer 1

就结果而言，它们基本相同。然而，Document.registerElement()已被弃用，因此您应该使用CustomElementRegistry.define()。

在我看来，主要区别在于.registerElement()返回新元素的构造函数，而.define()允许您指定构造函数，从而具有更大的灵活性。请考虑以下示例：

var MyElement = document.registerElement('me-me');
document.body.appendChild(new MyElement());
var myElement = document.getElementsByTagName('me-me')[0];
myElement.textContent = 'I am a custom element.';

---

class MyElement extends HTMLElement {
  connectedCallback() {
    this.textContent = 'I am a custom element.';
  }
}
customElements.define('me-me', MyElement);
document.body.appendChild(new MyElement());

如您所见，使用.define()可以预先指定内部文本，而在.registerElement()的情况下必须手动指定文本。考虑到这是一个非常简单的例子来展示我的观点，使用 .define()，您可以为自定义元素的默认行为、外观和内容添加更多内容，而使用.registerElement()则不能。

- Angelos Chalaris

---

哇，那是一個非常詳盡的解釋。謝謝！ - Adrian Moisa