Атрибут scoped

Атрибут scoped применяется для элемента style. Атрибут scoped задаёт правила стиля элементу, который является корнем элемента style, и всем его дочерним элементам.

Применить

Если к элементу style добавить атрибут scoped:

<div>Блок div <span>Привет мир!</span></div>
    <div>
      <style scoped>
        div { color: red; }
        span { color: green; }
      </style>
     Блок div <span>Привет мир!</span></div>
<div>Блок div <span>Привет мир!</span></div>

Правила стиля применяются только для блока div, в котором элемент style с атрибутом scoped.

Результат будет таким:

Результат применения атрибута scoped для элемента style
Результат применения атрибута scoped

Это можно сделать в любом месте разметки HTML. И конечно можно прописать стили в содержании, чтобы получить больше контроля над элементами. Если нужно применить стиль для родительского элемента и всех дочерних элементов div, можно применить псевдокласс :scope.

Поддержка

Атрибут scoped не новая функция HTML5, но с поддержкой в браузерах проблемы есть.

Таблица поддержки браузерами: “Атрибут scoped”

54321
(1 голос, в среднем: 5 из 5)