HTMLUnknownElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLUnknownElement extends HTMLElement

Beschreibung

HTMLUnknownElement ist die Schnittstelle, die der Browser für Elemente im HTML-Namensraum verwendet, deren Tag-Name er nicht kennt, etwa <foo>, <sidebar> oder vertippte Tags wie <dvi>. Solche Elemente werden trotzdem ganz normal in den DOM-Baum eingefügt, dargestellt (standardmäßig als Inline-Element) und können per CSS und JavaScript angesprochen werden.

Die Schnittstelle fügt keine eigenen Mitglieder hinzu. Alles, was du mit so einem Element machen kannst, kommt von HTMLElement, Element, Node und EventTarget, z. B. dataset, classList, addEventListener() oder hidden. Ihr eigentlicher Zweck ist, dass man mit instanceof HTMLUnknownElement prüfen kann, ob ein Element dem Browser unbekannt ist.

Wichtig ist der Unterschied zu Custom Elements: Tag-Namen mit Bindestrich (z. B. <my-widget>) sind gültige Namen für benutzerdefinierte Elemente und werden deshalb als HTMLElement erzeugt, nicht als HTMLUnknownElement. Das gilt auch dann, wenn nie customElements.define() dafür aufgerufen wurde. Auch einige veraltete Elemente wie <blink>, <bgsound>, <multicol>, <nextid> oder <spacer> werden laut HTML-Standard als HTMLUnknownElement abgebildet.

In der Praxis hilft die Schnittstelle vor allem beim Aufspüren von Tippfehlern im Markup, beim Validieren von HTML aus Fremdquellen oder beim Testen von Feature-Unterstützung für neue Elemente: Kennt ein Browser ein neues Element noch nicht, liefert document.createElement() ein HTMLUnknownElement.

Rückgabewert

Typ

HTMLUnknownElement

Beschreibung

Instanzen entstehen nicht per Konstruktor, sondern über den Parser oder über document.createElement() mit einem unbekannten Tag-Namen ohne Bindestrich.

Beispiele

Unbekanntes Element erzeugen und Typ prüfen

const unbekannt = document.createElement('foo');
const bekannt = document.createElement('div');
const custom = document.createElement('my-widget');

console.log(unbekannt instanceof HTMLUnknownElement); // Tag unbekannt
console.log(bekannt instanceof HTMLUnknownElement);   // HTMLDivElement
console.log(custom instanceof HTMLUnknownElement);    // gültiger Custom-Element-Name
console.log(custom.constructor.name);
console.log(Object.prototype.toString.call(unbekannt));

true false false HTMLElement [object HTMLUnknownElement]

Tippfehler im Markup aufspüren

// Alle Elemente im Dokument finden, die der Browser nicht kennt
const findeUnbekannteTags = (root = document) =>
  [...root.querySelectorAll('*')]
    .filter((el) => el instanceof HTMLUnknownElement)
    .map((el) => el.localName);

document.body.innerHTML = '<dvi>Tippfehler</dvi><p>OK</p><sektion>Hallo</sektion>';
console.log(findeUnbekannteTags());

["dvi", "sektion"]

Unterstützung für ein neues HTML-Element testen

// Kennt der Browser das Element, entsteht eine spezifische Klasse
const istElementBekannt = (tagName) =>
  !(document.createElement(tagName) instanceof HTMLUnknownElement);

console.log(istElementBekannt('dialog'));
console.log(istElementBekannt('search'));   // HTMLElement, falls unterstützt
console.log(istElementBekannt('blink'));    // veraltet -> unbekannt

true true false

Geerbte HTMLElement-Funktionen nutzen

const hinweis = document.createElement('hinweis');
hinweis.textContent = 'Bitte speichern!';
hinweis.dataset.level = 'warn';
hinweis.classList.add('badge');
hinweis.addEventListener('click', () => hinweis.remove());
document.body.append(hinweis);

console.log(hinweis.outerHTML);

<hinweis data-level="warn" class="badge">Bitte speichern!</hinweis>

// Wichtig · Fallstricke

Bindestrich-Namen sind keine unbekannten Elemente: <my-element> ist immer ein HTMLElement, auch ohne Registrierung. Ob ein Custom Element definiert ist, prüfst du mit customElements.get('my-element') oder dem CSS-Selektor :defined.
Kein Konstruktor: new HTMLUnknownElement() wirft einen TypeError („Illegal constructor“). Man kann die Klasse auch nicht als Basis für customElements.define() nutzen.
Nur im HTML-Namensraum: Unbekannte Elemente in SVG oder MathML (bzw. über createElementNS() mit einem anderen Namensraum) werden zu SVGElement, MathMLElement oder Element, nicht zu HTMLUnknownElement. In XML-Dokumenten entsteht meist ein einfaches Element.
Semantik und Barrierefreiheit: Unbekannte Tags haben keine eingebaute Semantik, keine ARIA-Rolle und kein Standard-Styling außer display: inline. Für eigene Komponenten besser gültige Custom-Element-Namen oder semantische Standardelemente verwenden.
Zukunftssicherheit: Ein heute unbekannter Name ohne Bindestrich kann später standardisiert werden und dann plötzlich ein anderes Verhalten bekommen (so geschehen bei <search>).
Die Schnittstelle wird von allen modernen Browsern unterstützt.

Siehe auch

Element instanceof HTMLAnchorElement HTMLButtonElement HTMLOptionElement