<slot> element
The mechanism in web components for letting outside content be "projected" into set places inside a component's Shadow DOM. A <slot> is a placeholder where the user's own child elements are placed — the basis for composing components.
Problem: a web component with Shadow DOM has its own encapsulated interior, but often you want to be able to put your own content into it (like children in React, or how a <button> shows its text). Slots solve it: the component defines <slot> places in its shadow DOM, and content the user writes between the component's tags is "projected" there. Named slots (<slot name="header"> + slot="header" on the child) let different content land in different places (heading, body, footer). Important detail: the projected content stays in the regular (light) DOM and is styled from there, not by the component's shadow CSS. Win: flexible, composable components (a card the user fills with content). The core of web components composition. Related to web components and declarative shadow DOM.