Schlaue Beispiele gefällig, was man mit Web Components alles bauen könnte, um HTML zu erweitern?

Web Components eignen sich ganz hervorragend, um von der Darstellung und/oder Funktionalität her komplexe Aufgaben gekapselt und wiederverwendbar zu lösen. Zudem können Web Components (ähnlich wie <iframe>, <object> und viele andere neue Tags) in ihrem Inneren einen Fallback enthalten, so dass Browser ohne die Fähigkeit zur Darstellung von Web Components trotzdem etwas anzuzeigen haben.

Außerdem können Web Components dieses Fallback gleichzeitig via slot-Mechanismus auswerten, um die Fallback-Inhalte entweder wieder anzuzeigen, oder aber aus dem HTML noch weitere Informationen zu ziehen.

An unnamed <slot> will be filled with all of the custom element's top-level child nodes that do not have the slot attribute.

Using templates and slots – MDN Web Docs

Im Sinne des progressive enhancement könnte man also mit Web Components viele alltägliche Probleme lösen:

Tweets

<twitter-tweet status="https://twitter.com/Interior/status/463440424141459456">
  <blockquote>Sunsets don't get much better than this one over @GrandTetonNPS. #nature #sunset</blockquote>
  <cite>US Department of the Interior</cite>
</twitter-status>

Diese Komponente zieht datenschutzzkonform Tweets von Twitter – und als Fallback braucht sie gar keine weiteren Requests, da der Content bereits auf der Seite zu sehen ist. 😉

Datenschutzkonformer Videoplayer

<video-embed url="https://www.youtube.com/embed/G2dGWH90aew?autoplay=1">
  <a href="https://www.youtube.com/embed/G2dGWH90aew?autoplay=1">Youtube-Video</a>
</video-embed>

Diese Komponente verwandelt mittels einfacher Magie den Link zu einem Video in eine Video-Einbettung. Redakteure werden es lieben, nicht mehr mit Embed-Codes herumzuhantieren, sondern einfach den Link zum Video aus der URL-Leiste ihres Browsers kopieren zu können – und trotzdem im fertigen Artikel ein eingebettetes Video zu sehen. (Ein Trick, den das Blogophon auch beherrscht.)

Mit lite-youtube schon ähnlich umgesetzt: Mit dieser Komponente bekommt man eine deutlich datenschutzkonforme Darstellung eines eingebetteten Videos von YouTube, Viemo oder ähnlichem – ähnlich wie in diesem Blog YouTube-Videos in die Seite eingebettet werden.

Code-Beispiele

<code-highlighted lang="javascript">
  <pre>
    <code>
      …
    </code>
  </pre>
</code>

Mit dieser Komponente kann ich Code-Beispiel mit Syntax-Highlighting versehen. In dem lang-Attribut wird dabei die verwendete Programmiersprache vermerkt.

Rich-Text-Editor

<textarea-special type="text/html">
  <textarea name="html">
    …
  </textarea>
</textarea-special>

Wie lange haben wir schon auf einen einfach im Browser funktionierenden Rich-Text-Editor gewartet. Die Komponente ist sogar so schlau, das generierte HTML wieder in das über ihm liegende Formular zurückzugeben.

Theoretisch könnte sie ja aber auch ganz andere Dinge zur Bearbeitung anbieten. text/markdown? text/csv? text/yaml? Warum nicht? Das könnte man alles über das type-Attribut lösen.

Geografische Eingabefelder

<input-coordinates provider="google-maps">
  <input name="coordinates" type="coordinates" step="0.001" value="53.246, 10.412" />
</input-coordinates>

Getreu meiner Idee, ein Eingabefeld für Geo-Koordinaten in HTML anzubieten, könnte diese Komponente eine Geo-Lokalisierung und Kartendarstellung beinhalten, um den Nutzer die Auswahl eines Standorts zu erlauben.