检测dom元素是自定义Web组件还是html元素

Question

在给定的html中，我如何判断dom元素是由浏览器定义的标准html组件或脚本中定义的Web组件（由作者）：

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

我知道如果Web组件已经注册，则无法以编程方式检查。他们都被认为是HTMLElement。有没有办法检查dom节点是标准html还是自定义Web组件？让我假设我使用querySelector()得到dom元素

Answer 1

custom element的名称需要包含-，而HTML定义的元素则不包含。所以：

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

（或者.indexOf("-") != -1用于尚未安装String#includes的旧浏览器。）

Answer 2

要检测DOM元素是否是注册的自定义元素，您应该使用customElements.get()。

如果元素尚未注册或者它是标准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>