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

Question

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

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

我知道无法以编程方式检查 Web 组件是否已注册。他们也都被考虑HTMLElement。有没有办法检查 dom 节点是标准 html 还是自定义 Web 组件？让我们假设我使用querySelector()

Answer 1

要检测 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>

Answer 2

甲定制元素的名字被要求以包含-，而一个HTML定义的元素不会。所以：

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

（或者.indexOf("-") != -1对于还没有的旧浏览器String#includes。）