<slot>-Element
Der Mechanismus in Web Components, mit dem Inhalt von außen an festgelegte Stellen im Shadow DOM einer Komponente „projiziert" wird. Ein <slot> ist ein Platzhalter, an dem die eigenen Kind-Elemente des Nutzers platziert werden — die Grundlage für die Komposition von Komponenten.
Problem: Eine Web Component mit Shadow DOM hat ihr eigenes gekapseltes Inneres, aber oft möchte man eigenen Inhalt hineinstecken können (wie children in React, oder wie ein <button> seinen Text zeigt). Slots lösen das: Die Komponente definiert <slot>-Stellen in ihrem Shadow DOM, und Inhalt, den der Nutzer zwischen den Tags der Komponente schreibt, wird dorthin „projiziert". Benannte Slots (<slot name="header"> + slot="header" am Kind) lassen unterschiedlichen Inhalt an unterschiedlichen Stellen landen (Kopf, Rumpf, Fuß). Wichtiges Detail: Der projizierte Inhalt bleibt im gewöhnlichen (Light-)DOM und wird von dort aus gestylt, nicht vom Shadow-CSS der Komponente. Vorteil: flexible, komponierbare Komponenten (eine Karte, die der Nutzer mit Inhalt befüllt). Der Kern der Komposition in Web Components. Hängt mit Web Components und Declarative Shadow DOM zusammen.