Тег <slot>

Синтаксис

<slot>...</slot>

Описание

Тег <slot> (от англ. slot — слот) представляет собой заполнитель внутри веб-компонента, который вы можете заполнить собственной разметкой, что позволяет создавать отдельные деревья DOM и представлять их вместе.

Элемент <slot> определяет ячейку, представляя назначенные ему узлы, если таковые имеются, или свое содержимое в противном случае. Элемент создает дерево с ограниченной областью видимости (Shadow DOM), которое имеет собственный корень (Shadow root) и может иметь собственные стили c ограниченной областью действия.

Атрибуты, которые можно использовать в теге <slot>, указаны ниже. Также тег поддерживает глобальные атрибуты и атрибуты события.

Атрибуты

Атрибут Значение Описание
name текст

Имя слота

Пример

HTML-код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Тег slot</title>
</head>
<body>
    <div>Имя:
        <slot name="username">Аноним</slot>
    </div>
</body>
</html>

Отображение в браузере:

Имя: Аноним

Параметры CSS по умолчанию

slot {
    display: contents;
}

Поддержка браузера

Элемент

Chrome

Chrome

Opera

Opera

Firefox

Firefox

Safari

Safari

Microsoft Edge

Microsoft Edge
<slot> Да Да Да Да Да