Устаревший тег <content> был точкой подстановки в Shadow DOM первой версии: в него попадало содержимое компонента, которое выбирал CSS-селектор из атрибута select. Браузеры его убрали, и теперь для них это неизвестный тег. Тег парный: закрывающий </content> нужен.
Чаще под фразой «тег content» имеют в виду другое: атрибут content у тега meta, свойство CSS content или блок с классом content. Все эти варианты собраны в таблице ниже. А вместо устаревшего тега в Shadow DOM используют slot.
<content select=".a"></content>В этой статье
Тег content в HTML: что это за устаревший тег
Shadow DOM прячет часть разметки компонента от остальной страницы. Эту скрытую часть называют shadow root. Содержимое, которое автор страницы записывает внутри компонента, по замыслу должно было попасть в нужное место внутри этой скрытой части. В первой версии Shadow DOM такое место обозначал тег content, а атрибут select сообщал, какую часть содержимого показать: например, select=".a" брал только теги с классом a.
Во второй версии Shadow DOM тег content заменил slot. Выбор по селектору исчез: теперь у содержимого записывают атрибут slot, а у места подстановки name.
<content select=".a"></content>Какие ещё бывают content: meta, CSS и блоки страницы
Слово content встречается в HTML и CSS в нескольких местах, и ни одно из них не является тегом content.
| Где встречается | Что это | Пример |
|---|---|---|
Атрибут content у meta | значение, которое идёт в паре с name, http-equiv или property | <meta name="description" content="Краткое описание страницы"> |
meta name="viewport" | настройки ширины экрана на телефоне | <meta name="viewport" content="width=device-width, initial-scale=1"> |
meta name="robots" | указания для поисковых роботов | <meta name="robots" content="noindex, nofollow"> |
meta http-equiv | служебные указания браузеру, например переадресация | <meta http-equiv="refresh" content="5; url=/new/"> |
Свойство CSS content | текст или картинка в псевдоэлементах ::before и ::after | .note::before { content: "Важно: "; } |
justify-content и align-content | свойства CSS для выравнивания в flex и grid | display: flex; justify-content: center; |
Класс content | обычное название блока с основным содержимым, это не тег | <main class="content">...</main> |
Значение атрибута content у meta может быть любой строкой: описанием, списком настроек через запятую или адресом. Какая строка нужна, определяет атрибут рядом с ним: name, http-equiv или property.
Как браузер читает content в разметке
Для браузера content неизвестный тег. Его класс HTMLUnknownElement, свойства select и метода getDistributedNodes у него нет, а display по умолчанию inline. Текст внутри остаётся обычным текстом страницы. На первой версии Shadow DOM держались класс HTMLContentElement и метод createShadowRoot, их в браузере больше нет.
const c = document.querySelector("content");
console.log(c.constructor.name, typeof HTMLContentElement);Пример: как браузер читает content
Кнопки меняют запись. Под ней показаны класс тега, размер и наличие старых классов браузера.
Работает ли content внутри shadow root
Нет. Если записать content в современный shadow root, содержимое компонента не покажется: сам компонент имеет высоту 0. Содержимое выводит только slot. Слот без name принимает теги без атрибута slot, слот с name принимает теги с таким же значением slot.
Пример: content и slot внутри shadow root
Кнопки меняют запись в shadow root. Высоты тегов и назначенные слоты измерены в рамке.
Какие браузеры понимали content
Тег поддерживали браузеры на движке Chromium и Firefox, но их разработчики его уже убрали. В Safari тега не было.
Пример: таблица версий
| Браузер | С какой версии | Убран в версии |
|---|---|---|
| Chrome | 35 | 89 |
| Edge | 79 | 89 |
| Firefox | 33, только с включённым флагом | 59 |
| Opera | 26 | 75 |
| Safari | не было | нет |
Чем заменить content: тег slot
В Shadow DOM второй версии место подстановки обозначает slot. Он принимает содержимое компонента по названию: у слота записывают name, а у выводимого тега атрибут slot с тем же значением. Слот без name принимает всё, у чего нет атрибута slot.
<div id="card">
<h3 slot="title">Заголовок</h3>
<p>Текст карточки</p>
</div>const root = document.querySelector("#card").attachShadow({ mode: "open" });
root.innerHTML = '<slot name="title"></slot><slot></slot>';Выбрать содержимое по CSS-селектору, как это делал select, у slot нельзя: нужные теги помечают атрибутом slot заранее. Для собственных компонентов используйте такой способ, а старый content не записывайте.
Частые ошибки с тегом content
| Ошибка | Что получится | Как исправить |
|---|---|---|
<content select=".a"></content> внутри Shadow DOM | Содержимое компонента не показывается, его высота равна 0 | Записать <slot></slot> или <slot name="..."></slot> |
<slot select=".a"> по аналогии с content | Атрибут игнорируется, в слот попадает всё, у чего нет slot | Пометить нужные теги атрибутом slot и дать слоту такое же name |
Свойство CSS content: "Важно: " на обычном элементе | Текст не появляется | Записать свойство на ::before или ::after |
