javascript - window.customElements.define() 和 document.registerElement() 有什么区别

Question

我一直在阅读一些关于网络组件的教程(原生的，没有聚合物)。我已经看到了两种注册组件的方法，但我对使用什么感到有点困惑。对于第二个，我实际上在 vscode 中收到一个 typescript 错误:[ts] 属性“registerElement”在类型“Document”上不存在。您是说“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);

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() 相比，您可以为自定义元素的默认行为、外观和内容添加更多内容。 .