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的旧浏览器，或{{1}}。

Answer 2

要检测DOM元素是否为注册的自定义元素，您应该使用Status.joins(:units).uniq.map {|s| {name: s.name, data: s.units.group(:name).count}}。

如果元素尚未注册或者它是标准HTML元素，则该方法将返回customElements.get()。

如果它是已注册的自定义元素，则会返回其undefined。

＆＃13;

class

＆＃13;

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' ) )

＆＃13;

Answer 3

您应该考虑存在可能未定义为自定义元素的自定义标记名称。例如document.createElement('custom-tagname')。

如果您想检查它实际上是已注册自定义元素的实例，您可以使用 instanceof：

function isDefinedCustomElement(node) {
    if (node.tagName.includes("-")) {
        return false;
    }
    const customElementClass = window.customElements.get(node.tagName.toLowerCase());
    return customElementClass && node instanceof customElementClass;
}

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

3 个答案: