2017-12-10 46 views
1

与えられたhtmlでは、DOM要素がブラウザで定義された標準HTMLコンポーネント(スクリプト作成者によって定義された)dom要素がカスタムWebコンポーネントかhtml要素かを検出

Webコンポーネントが既に登録されているかどうかをプログラムでチェックする方法はありません。また、それらはともにHTMLElementとみなされます。 DOMノードが標準のhtmlまたはカスタムWebコンポーネントであることを確認する方法はありますか?のは、私がquerySelector()

答えて

4

A custom elementの名前をHTMLに定義された要素ではないだろう一方は、-を含むようにを必要とする使用してDOM要素を取得しasumeしてみましょう。だから、:

if (theElement.tagName.includes("-")) { 
    // It's custom 
} else { 
    // It isn't 
} 

+2

迅速な答えをいただき、ありがとうございます。私はフォローアップの読書をいくつか行っており、ルールを破るいくつかの[SVG要素](https://stackoverflow.com/a/22545622/1903781)があることを知りました。このシナリオを確認するのは簡単です。 –

2

DOM要素がregistredカスタム要素であるならば、あなたはcustomElements.get()を使用する必要があります検出するために、(まだString#includesを持っていない古いブラウザまたは.indexOf("-") != -1。)。

要素がまだ登録されていない場合、または標準HTML要素の場合、このメソッドはundefinedを返します。

登録されたカスタムエレメントの場合は、classが返されます。

customElements.define('custom-element', class extends HTMLElement {}) 
 

 
console.log(customElements.get('custom-element')) 
 
console.log(customElements.get('p')) 
 
console.log(customElements.get('fake-element')) 
 
console.log(customElements.get('font-face'))
<custom-element></custom-element> 
 
<fake-element></fake-element> 
 
<p></p> 
 
<font-face></font-face>

+1

ヒントありがとうございます。本当に便利です! –

関連する問題