2017-12-10 5 views
1

주어진 HTML에서 dom 요소는 브라우저 또는 작성자가 정의한 스크립트에 정의 된 웹 구성 요소에 의해 정의 된 표준 HTML 구성 요소입니다.dom 요소가 사용자 지정 웹 구성 요소 또는 html 요소인지 확인

<div></div> 
<custom-web-component></custom-web-component> 

웹 구성 요소가 이미 등록되어 있는지 프로그래밍 방식으로 확인할 방법이 없다는 것을 알고 있습니다. 또한 이들은 모두 HTMLElement으로 간주됩니다. DOM 노드가 표준 HTML 또는 사용자 정의 웹 구성 요소인지 확인하는 방법이 있습니까? 이 전 querySelector()

답변

4

custom element의 이름을 HTML에 정의 된 요소는하지 않습니다 반면 가하는 -을 포함 필요합니다 사용하여 DOM 요소를 얻을 수 asume 보자. 그래서 (. 또는 아직 String#includes이없는 오래된 브라우저 .indexOf("-") != -1) DOM 요소가 registred 사용자 정의 요소 인 경우

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

+2

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>

는 신속한 답변에 감사드립니다. 나는 몇 가지 후속 작업을 해왔으며 규칙을 어기는 몇 가지 [SVG 요소] (https://stackoverflow.com/a/22545622/1903781)를 배웠다. 이 시나리오를 쉽게 확인할 수 있습니다. –

2

감지하려면 customElements.get()를 사용해야합니다.

요소가 아직 등록되지 않았거나 표준 HTML 요소 인 경우 메서드는 undefined을 반환합니다.

등록 된 맞춤 요소 인 경우 class을 반환합니다.

+1

힌트를 가져 주셔서 감사합니다. 정말 유용합니다! –

관련 문제