Überprüfen, ob Dom Element nativ ist/kein benutzerdefiniertes Element

Question

Gibt es eine Möglichkeit zu überprüfen, ob ein Dom Element ein Natives Element oder ein (nicht aufgelöstes) benutzerdefiniertes Element ist, ohne alle Native TagNames in Javascript zu überprüfen?

Ich dachte schon an element.constructor === HTMLElement zu überprüfen, aber das <main> (documentation) Tag hat das, da es Spitzenklasse ist.

Grundsätzlich brauche ich eine schnellere und weniger wartungsintensive Art der Überprüfung für ein natives Element.

Answer 1

So nach den comment of Supersharp Ich fand heraus, dass alle benutzerdefinierten Elemente tagName oder das ist Attribut muss einen Bindestrich enthalten und native Elemente tun dies nie, deshalb ist es am besten, diese Funktion zu verwenden:

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

Einfach so.

The W3C Standard documentation:

Sie enthalten einen Bindestrich, für Namespacing verwendet und Vorwärtskompatibilität zu gewährleisten (da werden keine Elemente in HTML, SVG oder MathML mit Bindestrich enthaltenden lokalen Namen in der Zukunft hinzugefügt werden).

Answer 2

Verwenden Sie den :unresolved pseudo-Selektor zusammen mit der .constructor Eigenschaft:

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>