檢查Dom元素是否爲Native/no自定義元素

Question

有沒有方法檢查Dom元素是否是本地元素或未檢測到的自定義元素（未解析）而未檢查Javascript中的所有Native tagNames？

我已經想到檢查element.constructor === HTMLElement，但<main>（documentation）標記具有該標記，因爲它是頂級類。

基本上我需要一個更快，維護更少的檢查本地元素的方法。

Answer 1

所以comment of Supersharp後，我發現所有的自定義元素標籤名或爲屬性必須包含一個連字符和本地元素永遠不會做，所以最好的方法是使用這個函數：

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

與.constructor財產一起使用:unresolved僞選擇：

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>