Custom Tags

[ThomKoeh]

Hallo, wie wird denn mit Custom-Tags, wie sie zum Beispiel von Angular eingesetzt werden können, bewertet. Ein Beispiel wäre </router-outlet). Verhält es sich hier, wie bei den Custom-Attributen, sodass es kein Fehler ist?

[marcus-herrmann]

Ein Custom Element ist ohne weitere "Behandlung" erstmal ein div mit einem "schicken Namen", wie es TGPi hier nennt: https://www.tpgi.com/custom-element-semantics/ - aber es kommt deswegen unbehandelt genauso semantik-los wie ein div daher.

In dem oben verlinkten Artikel, der trotz seines Alters korrekt ist, gibt es zwei Punkte:

• Wenn man dem Custom Element eine explizite ARIA-Rolle gibt, hat das Element dann zumindest Semantik (z. B. <fancy-button role="button">). Aber wie auch bei einer Verteilung einer ARIA-Rolle auf einem div/span/wasauchimmer muss man natürlich auch das einlösen, was die Rolle verspricht (Tastaturerreichbarkeit, bestimmte Tastaturevents, etc).
• Auf der anderen Seite kann man Custom Elements auch von nativen Elementen "erben" lassen, zumindest auf dem Papier (faktisch weigert sich Apple/WebKit, dies zu implementieren und hält damit den ganzen Laden auf). Stichwort hierfür ist "Type Extention", mehr Details hier: https://web.dev/customelements/#extending-elements.

Kurzfassung: Custom Elements wie divs sehen. Wenn ein "unbehandeltes" div an einer vorgefundenen Stelle die falsche semantische Wahl wäre, dann entsprechend in 9.4.1.2 behandeln. In anderen Fällen ignorieren, wie man div und span ignoriert, wenn sie irrelevant sind.

[MarcHaunschild]

Hallo Marcus; Super zusammengefasst! Ich habe noch eine Frage außerhalb der großen Gruppe. Warum hatte das Beispiel einen einleitenden backslash?Ist das so in Angular, ggfs aus Gründen? Weniger störend? Fügt der Browser ggfs im DOM dann kein öffnendes Tag hinzu (dann wäre es aber gar nichts, nicht mal ein div)? Oder war das nur komisch/ falsch „zitiert“

EDIT Ich habe das als Mail bekommen und dachte ich antworte mit meiner off-topic-Frage nur Marcus - die Zitate, Signatur usw habe ich mal entfernt

[ThomKoeh]

Vielen Dank für die Antwort!

Das heißt, dass wenn ein Custom Element Namen, Rolle bzw. Wert benötigt, muss dies (wie bei anderen nicht semantischen Elementen) mit ARIA nachgebildet werden. Ist dies nicht der Fall, dann wäre es ein Fehler.

Falls es nur zur Eingrenzung von Inhalten verwendet wird, ohne ein interaktives Element oder Strukturelement zu sein, dann wäre es bei 9.4.1.2 kein Fehler.

Liege ich da richtig?

@MarcHaunschild habe bei der Frage das öffnende Tag vergessen...

[marcus-herrmann]

Hi @MarcHaunschild, das war oben falsch zitiert. Für Custom Elements gelten die gleichen Regeln wie für "eingeborene Elemente", mit dem Unterschied, dass die benutzerdefinierten Elemente einen Bindestrich haben müssen, die "eingeborenen" keins haben dürfen.

[marcus-herrmann]

Das heißt, dass wenn ein Custom Element Namen, Rolle bzw. Wert benötigt, muss dies (wie bei anderen nicht semantischen Elementen) mit ARIA nachgebildet werden. Ist dies nicht der Fall, dann wäre es ein Fehler.

Japp. Die mangelnde Type Extension ist auch eines der Hemmschuhe von Web Components allgemein, bzw. eines der Hauptprobleme von "Framework-HTML". Gäbe es sie verlässlich, würde die Lage besser aussehen.

Falls es nur zur Eingrenzung von Inhalten verwendet wird, ohne ein interaktives Element oder Strukturelement zu sein, dann wäre es bei 9.4.1.2 kein Fehler.

Nochmal japp, zumindest nach meinem Verständnis der Dinge. Dein router-outlet von oben ist garantiert nur "Developer Convenience", eine besondere Semantik sollte wahrscheinlich gar nicht kommuniziert werden.

[ThomKoeh]

Vielen Dank noch einmal!

[detlevhfischer]

@ThomKoeh Können wir das Issue schließen?

[ThomKoeh]

Klar vielen Dank!