Предыдущий
Тег <select>

Тег <slot>

Следующий
Тег <small>

Синтаксис

<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> Да Да Да Да Да

Комментарии

Оставить комментарий:
* отправляя форму, я даю согласие на обработку персональных данных

Продолжаем добавлять языки программирования для Вас.
Впереди много интересного!

Только свежие новости программирования и технологий каждый день.

Свежие посты

Важное изменение в HTML
15 апреля, вторник
60
Кастомная валидация форм
15 апреля, вторник
59
Тернарный оператор
14 апреля, понедельник
78
Метод padStart
14 апреля, понедельник
93
Метод padEnd
14 апреля, понедельник
84
Крутая кнопка с RGB подсветкой и эффектом при наведении.
14 апреля, понедельник
63