# Web Components

Kategorie: [Rendering & JavaScript](https://seo-geo-glossary.com/de/glossar/kategorie/rendering-javascript/) › [JavaScript & Frameworks](https://seo-geo-glossary.com/de/glossar/kategorie/rendering-javascript/javascript-frameworks/) · Auch genannt: Custom Elements

**Web Components** sind ein Satz von Browser-Standards, mit dem Entwickler eigene, wiederverwendbare HTML-Elemente mit gekapselter Logik und gekapseltem Styling bauen. Sie funktionieren ohne Framework und lassen sich wie normale HTML-Elemente einsetzen.

## Die drei Bausteine

Laut MDN bestehen Web Components aus drei Technologien:

1. **Custom Elements**: JavaScript-APIs, mit denen eigene Elemente samt Verhalten definiert werden. Registriert wird eine Klasse über `customElements.define()`.
2. **Shadow DOM**: ein gekapselter DOM-Teilbaum, dessen Styles und IDs nach außen privat bleiben, sodass es keine Namenskollisionen gibt.
3. **HTML Templates und Slots**: `<template>` enthält Markup, das zunächst nicht gerendert wird. `<slot>` ist ein Platzhalter für Inhalte, die von außen eingesetzt werden.

Der Name eines Custom Elements muss einen Bindestrich enthalten, etwa `<produkt-karte>`. So unterscheidet der Browser es von Standard-Elementen.

## Web Components und SEO

Google rendert Seiten mit einem Headless Chromium. Beim Rendern fasst Google den Inhalt aus Shadow DOM und Light DOM zusammen („flattening“). Nutzt eine Komponente den `<slot>`-Mechanismus für Light-DOM-Inhalte nicht, verweist Google auf die Dokumentation der Komponente oder darauf, eine andere Komponente zu verwenden. Ob alle erwarteten Inhalte im gerenderten HTML stehen, lässt sich im Rich-Results-Test oder im URL-Prüftool kontrollieren. Indexiert werden kann nur, was im gerenderten HTML sichtbar ist.

Ohne JavaScript bleibt ein Custom Element ein leerer Container. Crawler, die kein JavaScript ausführen, sehen dann nur das, was im ursprünglichen HTML zwischen den Tags steht. Inhalte, die ranken sollen, stehen deshalb am sichersten als normales Markup auf der Seite. Das ist eine Einschätzung aus einer Zweitquelle, keine Vorgabe von Google.

## Beispiel

```html
<produkt-karte>
  <h2 slot="titel">Laufschuh Modell X</h2>
  <p slot="preis">89,00 €</p>
</produkt-karte>
```

Der Text steht im Light DOM der Seite und wird über Slots in die Karte eingesetzt. So bleibt er im HTML sichtbar, auch bevor das Element definiert ist.

## Häufige Fehler

- **Light-DOM-Inhalt ohne `<slot>`.** Nutzt eine Komponente den `<slot>`-Mechanismus für Light-DOM-Inhalt nicht, verweist Google auf die Dokumentation der Komponente oder auf eine andere Komponente.
- **Gerendertes HTML nicht geprüft.** Google empfiehlt, im Rich-Results-Test oder im URL-Prüftool zu kontrollieren, ob das gerenderte HTML alle erwarteten Inhalte enthält.
- **Wichtigen Text nur per JavaScript erzeugen.** Google weist darauf hin, dass nicht alle Bots JavaScript ausführen können.

## Häufige Fragen

**Werden Inhalte im Shadow DOM indexiert?** Google fasst Shadow DOM und Light DOM beim Rendern zusammen. Inhalte müssen im gerenderten HTML sichtbar sein.

**Brauche ich ein Framework?** Nein, Web Components sind Browser-Standards. Es gibt Frameworks, die auf ihnen aufbauen oder sie ausgeben können.

## Verwandte Begriffe

- [Shadow DOM](https://seo-geo-glossary.com/de/glossar/shadow-dom/index.md)
- [Web Rendering Service (WRS)](https://seo-geo-glossary.com/de/glossar/web-rendering-service/index.md)
- [JavaScript-SEO](https://seo-geo-glossary.com/de/glossar/javascript-seo/index.md)
- [Rendering](https://seo-geo-glossary.com/de/glossar/rendering/index.md)
- [Gerendertes HTML](https://seo-geo-glossary.com/de/glossar/gerendertes-html/index.md)

## Quellen

- [Web Components – MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
- [Fix Search-related JavaScript problems – Google Search Central](https://developers.google.com/search/docs/crawling-indexing/javascript/fix-search-javascript)
- [JavaScript SEO Basics – Google Search Central](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics)

---

Stand: 8. Oktober 2026
URL: https://seo-geo-glossary.com/de/glossar/web-components/