Элемент <slot>
Механизм веб-компонентов, позволяющий «проецировать» внешнее содержимое в заданные места внутри Shadow DOM компонента. <slot> — это заполнитель, куда попадают собственные дочерние элементы пользователя; основа композиции компонентов.
Проблема: у веб-компонента с Shadow DOM своя инкапсулированная внутренность, но часто хочется положить в него собственное содержимое (как children в React или как <button> показывает свой текст). Слоты решают это: компонент объявляет в теневом DOM места <slot>, а всё, что пользователь пишет между тегами компонента, «проецируется» туда. Именованные слоты (<slot name="header"> + slot="header" у потомка) отправляют разное содержимое в разные места — заголовок, тело, подвал. Важная деталь: проецируемое содержимое остаётся в обычном (light) DOM и стилизуется оттуда, а не CSS-ом теневого дерева компонента. Выигрыш: гибкие, компонуемые компоненты (карточка, которую заполняют чем угодно). Ядро композиции в веб-компонентах.