HTML/Web Components/custom elements

Aus SELFHTML-Wiki
< HTML‎ | Web Components(Weitergeleitet von Custom elements)
Wechseln zu: Navigation, Suche
Web Components Logo

Informationen zu diesem Text

Lesedauer
10 min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
gute Kenntnisse in
● HTML
● JavaScript

Mit Web Components haben Sie die Möglichkeit, eigene benutzerdefinierte Elemente (englisch: custom elements) zu erstellen. Dies können neue HTML-Tags mit besonderen Aufgaben oder die Erweiterung bestehender Tags sein.



Gegenüber externen Plugins haben custom elements den Vorteil, dass sie …

  • als HTML-Elemente ein einheitliches Markup besitzen
  • miteinander kombinier- und schachtelbar sind.
  • ihren inneren Aufbau (HTML, CSS, JS) kapseln und so Konflikte mit anderen Plugins oder Scripts auf der Webseite verhindern.
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

Details: caniuse.com

Regeln[Bearbeiten]

benutzerdefinierte Elemente (englisch: custom elements) folgen einigen Regeln, damit Parser sie von regulären HTML-Elementen unterscheiden können:

  • Namen von benutzerdefinierten Elementen müssen immer einen Bindestrich enthalten.
    <x-line><mein-element>
    Dies sichert auch eine Vorwärts-Kompatibilität eventueller neuer Tags.
    (Google trackt die Verwendung von custom elements und plant „erfolgreiche“ Elemente in den Standard zu übernehmen.)
  • Ein Tag kann nur einmal registriert werden, sonst gibt es einen DOMException-Fehler
  • benutzerdefinierte Elemente müssen immer mit einem schließenden Tag geschlossen werden.
    <x-line></x-line>

Verwendung[Bearbeiten]

neue Elemente[Bearbeiten]

bestehende Elemente erweitern[Bearbeiten]

Anwendungsbeispiele[Bearbeiten]

Gedicht mit Zeilen[Bearbeiten]

Beispiel: benutzerdefinierte Elemente für eine Zeile ansehen …
<blockquote>
	<p>
		<x-line>Someday girl I don’t know when were gonna get to that place</x-line><br>
		<x-line>Where we really want to go and well walk in the sun</x-line><br>
		<x-line>But till then tramps like us baby we were born to run</x-line>
	</p>
	<footer><cite>Bruce Springsteen, “Born to Run”</cite></footer>
</blockquote>
bla
x-line
{
	display: block;
	--indent: 0.8em;
	padding-left: var(--indent);
	text-indent: calc(-1 * var(--indent));
}

x-line + br
{
	/* for WebKits */
	content: '';
	
	/* visually hidden; for Firefox */
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}
Erklärung folgt

2. Beispiel[Bearbeiten]

Beispiele im Netz[Bearbeiten]

In den Tutorials wimmelt es von Beispielen, die nur das Prinzip veranschaulichen, aber keinen Nutzen bringen, wie das <x-treehouse>-Element im ebenso benannten Blog oder der <x-greeter> im Self-Blog von 2014. Die <howto-checkbox> bringt sogar Nachteile mit sich: das Standardverhalten der Tastaturbedienung muss erst noch nachgebaut werden, innerhalb von form-Elementen sind keine custom elements erlaubt, sodass Eingaben über ein versteckes input-Element importiert werden müssen.

Trotzdem gibt es einige Beispiele, die einen zweiten Blick lohnen:


Weblinks[Bearbeiten]


Siehe auch[Bearbeiten]