检查 Dom 元素是否为本机/没有自定义元素

Question

有没有办法在不检查 Javascript 中的所有 Native tagNames 的情况下检查 Dom 元素是原生元素还是（未解析的）自定义元素？

我已经考虑过检查element.constructor === HTMLElement，但<main> (documentation) 标记具有它，因为它是顶级类。

基本上，我需要一种更快、维护更少的方法来检查原生元素。

Answer 1

所以在comment of Supersharp 之后，我发现所有自定义元素 tagName 或 is 属性都必须包含连字符，而原生元素永远不会，所以最好的方法是使用这个函数：

function isCustomElement(element){
    if(element.tagName.indexOf("-") !== -1) {
        return true;
    }
    let isAttribute = element.getAttribute("is");
    if(isAttribute === null) {
        return false;
    }
    return isAttribute.indexOf("-") !== -1;
}

就这么简单。

The W3C Standard documentation:

它们包含一个连字符，用于命名空间和确保向前兼容性（因为将来不会将任何元素添加到带有连字符的本地名称的 HTML、SVG 或 MathML）。

Answer 2

使用:unresolved 伪选择器和.constructor 属性：

var isUnresolved = function(selector) {
  var element = document.querySelector(selector + ':unresolved');
  try {
    return (/HTMLElement/).test(element.constructor);
  } catch (ignore) {
    return false;
  }
};
console.log(
  isUnresolved('foo-bar')
);
console.log(
  isUnresolved('main')
);

<foo-bar></foo-bar>
<main></main>