44

特定の名前のカスタム要素が登録されているかどうかを検出しようとしています。そのようなチェックを行う方法はありますか？

または、登録されたカスタム要素のリストを取得する方法はありますか?

ありますが、他に何document.registerElementがありますか？一方向の API ですか？

4

8 に答える 8

54

要素が登録されたかどうかを確認する方法があります。登録された要素には独自のコンストラクターがありますが、登録されていない要素はコンストラクターにプレーンHTMLElement()を使用します (またはHTMLUnknownElement()、名前が有効でないかどうかに関係なく、これは問題の範囲外です)。

document.registerElement('x-my-element');
document.createElement('x-my-element').constructor
//⇒ function x-my-element() { [native code] }
document.createElement('x-my-element-not-registered').constructor
//⇒ function HTMLElement() { [native code] }

つまり、チェッカーは次のようになります。

var isRegistered = function(name) {
  return document.createElement(name).constructor !== HTMLElement;
}

または、シンタックス シュガーを使用すると、次のようになります。

String.prototype.isRegistered = function() { 
  return document.createElement(this).constructor !== HTMLElement; 
}
'x-my-element'.isRegistered()
//⇒ true
'xx-my-element'.isRegistered()
//⇒ false

最も慎重なバージョン:

String.prototype.wasRegistered = function() { 
  switch(document.createElement(this).constructor) {
    case HTMLElement: return false; 
    case HTMLUnknownElement: return undefined; 
  }
  return true;
}
'x-my-element'.wasRegistered()
//⇒ true
'xx-my-element'.wasRegistered()
//⇒ false
'xx'.wasRegistered()
//⇒ undefined

私の知る限り、登録済み要素のリストにアクセスする方法はありません。

ところで、try- catched 登録 (@stephan-muller によって提案された) の方がニーズに合っていると思います。

于 2015-01-29T08:46:41.607 に答える
38

カスタム要素は最新の標準の一部になったので、2017 年以降にこれを行う方法を共有したいと思いました。

注: このdocument.registerElement関数は廃止され、customElements.define() が優先されました。

customElementsでグローバルとして定義されwindowます。3 つのメソッドが定義されています。

  1. define
  2. get
  3. whenDefined

getここが重要です。get要素名の を受け取り、string指定されたカスタム要素のコンストラクタを返しますundefined。名前のカスタム要素定義がない場合は、コンストラクタを返します。

したがって、2017 年以降、要素が登録されているかどうかを確認するには、次のようにします。

const myElementExists = !!customElements.get('my-element');

ただし、定義された要素のリストを取得する方法があるかどうかはわかりません。

注:これは IE では機能しません。対応ブラウザはこちら

于 2017-02-24T06:48:59.470 に答える
7

他の Web コンポーネント フレームワークに当てはまるかどうかはわかりませんが、Chrome で Polymer を使用しているCustomElementsときに、オブジェクトにオブジェクトがありwindowます。オブジェクトには、 と呼ばれるすべての登録済みカスタム要素のCustomElementsキー/値のコレクションがありますregistry。

function isRegistered(name) {
    if (window.CustomElements && window.CustomElements.registry)
        return name in window.CustomElements.registry;
    return undefined;
}
于 2015-02-01T05:30:31.837 に答える
3

Polymer の Slack チャンネルに既に書かれているように、これは仕事をすることができる汚いものです:

function isElementRegistered(elementId) {
  return Polymer.telemetry.registrations.find(function(item) { return item.is === elementId })
}

ただし、どれだけPolumer.telemetry.registrations信頼できるかはわかりませんが（ドキュメントで見たことがありません）、Array.prototype.findクロスブラウザーではありません！

于 2016-02-09T12:27:02.073 に答える
1

カスタム要素クラス (コンストラクター) が要素を自己登録するシナリオでは、クラスの存在を確認するだけで十分です。

于 2017-11-09T13:28:09.990 に答える