web-dev-qa-db-ja.com

window.customElements.define（）とdocument.registerElement（）の違いは何ですか

私はWebコンポーネント（ネイティブ、ポリマーなし）に関するいくつかのチュートリアルを読んでいます。コンポーネントを登録する2つの方法を見てきましたが、何を使用すればよいか少し混乱しています。 2つ目は、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);
javascriptecmascript-6web-component
14
Adrian Moisa

結果に関しては、彼らはほとんど同じことを達成します。ただし、 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()を使用する場合よりも、カスタム要素のデフォルトの動作、外観、およびコンテンツに多くを追加できます。 。

25
Angelos Chalaris