window.customElements.define()和document.registerElement()之间的区别是什么

Question

我一直在阅读一些关于Web组件的教程(本机,没有聚合物).我已经看到了两种注册组件的方法,我对使用什么感到困惑.对于第二个,我实际上在vscode中收到了一个打字稿错误:[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);

Answer 1

就结果而言,它们几乎完全相同.但是,Document.registerElement()已弃用,因此您应该使用CustomElementRegistry.define().

在我看来,关键的区别在于.registerElement()返回新元素的构造函数,而.define()允许您指定构造函数,从而允许更多的多功能性.考虑下面的例子:

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

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

如您所见,使用.define()允许您预先指定内部文本,而您必须手动指定文本.registerElement().如果这是一个非常简单的示例来展示我的观点,使用.define(),您可以添加更多的自定义元素的默认行为,外观和内容,而不是使用.registerElement().