5

ポリマーまたは x-tag を使用する場合、新しい要素を登録する必要があります。しかし、プレーンな es6 JavaScript を使用して、registerElement を使用せずに怪しげなコンポーネントを構築できるとすれば、それはなぜでしょうか。これは、ポリフィルや es5 へのトランスパイルなしで、最新バージョンの Chrome、Firefox、および Edge で正常に動作します。

<a-custom-element id="aid"></a-custom-element>

<template id="a-custom-element">  
    ....  // html
</template>

この関数を使用して、コンポーネント クラス インスタンスを初期化 (マウント) します。

function mountCustomElement(custom_tag, custom_class) {
    Array.from(document.querySelectorAll(custom_tag)).forEach((element) => {
            new custom_class(element, custom_tag);
    });
}
document.addEventListener("DOMContentLoaded", function () {
    ....
    mountCustomElement('a-custom-element', AComponent);
    ....
});

コンポーネント クラス:

class AComponent {             // without the extend HTMLElement !!
    constructor(custom_element, template_id) {

        this.id = custom_element.id;
        let content = document.querySelector(`#${template_id}`).content;
        // for easy inspection
        AComponent.hasOwnProperty('instances') ?Acomponent.instances.push(this) :AComponent.instances = [this];

        ....
        let $root = document.querySelector(`#${this.id}`);
        $root.appendChild(document.importNode(content, true));
        ....
    }

参照: ES6 Web コンポーネント – フレームワークのない男

および要素登録:

カスタム要素を使用する前に、登録する必要があります。それ以外の場合、ブラウザーはそれを HTMLElement と見なします。意味 ？

更新- W3C 仕様は本日 2016 年 3 月 18 日に更新されました。

2.1の紹介から：

カスタム要素は、作成者が完全な機能を備えた独自の DOM 要素を構築する方法を提供します。作成者は文書内でいつでも非標準のタグ名を使用でき、アプリケーション固有の動作が事後にスクリプトなどによって追加されますが、そのような要素は歴史的に非準拠であり、あまり機能的ではありませんでした。カスタム要素を定義することにより、作成者は、要素を適切に構築する方法と、そのクラスの要素が変更にどのように反応するかをパーサーに通知できます。

4

1 に答える 1

3

カスタム要素は次の機能を提供します。

  1. html のブロブの抽象化を提供する
    タグを使用してブロブをコンポーネントに手動で追加することで、これを実現しました。
  2. カスタム ライフサイクル コールバック
    クラス のコンストラクター内で行われていることAComponentは、createdCallback 内に移動でき、カスタム タグが DOM レンダラーによって検出されるたびに実行されます。自分に電話する必要はありませんmountCustomElement。


カスタム要素は、 -attachedCallbackやなどの他のユーティリティを提供しますdetachedCallback: コンポーネントが DOM にアタッチされ、DOM から削除されたときに何をすべきか。
- attributeChangedCallback: 要素の属性の 1 つが変更された場合の対処方法。

これらはすべて、理想的には、mutationObservers などを使用して実行できます。ただし、カスタム要素は、単純なコールバックを使用してすべてをネイティブにサポートするパッケージを提供し、それ以外の方法で実装するのは困難です。

カスタム要素を使用する前に、登録する必要があります。それ以外の場合、ブラウザーはそれを HTMLElement と見なします。意味 ？

コールバックは起動されず、コンポーネントのプロトタイプにアタッチしたパブリック関数は使用できません。基本的に、ブラウザが何をすべきかわからないhtmlタグがあります。

于 2016-03-18T08:54:22.080 に答える