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()。

window.customElements.define（）和document.registerElement（）之间的区别是什么

1 个答案: