@scope

Директива @scope ограничивает область действия CSS‑правил: стили внутри блока @scope применяются только к элементам в пределах заданного поддерева и (опционально) исключая элементы до указанной границы.

        
          
          <section class="article">  <h2 class="title">Заголовок статьи</h2>  <figure class="media">    <img src="cat.jpg" alt="Котик" />    <figcaption class="title">Подпись к изображению</figcaption>  </figure>  <p>Текст…</p></section><section class="aside">  <h2 class="title">Боковая колонка</h2>  <p>Текст…</p></section>
          <section class="article">
  <h2 class="title">Заголовок статьи</h2>
  <figure class="media">
    <img src="cat.jpg" alt="Котик" />
    <figcaption class="title">Подпись к изображению</figcaption>
  </figure>
  <p>Текст…</p>
</section>

<section class="aside">
  <h2 class="title">Боковая колонка</h2>
  <p>Текст…</p>
</section>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          /* Красим заголовки только внутри .article, но не внутри .media */@scope (.article) to (.media) {  .title {    color: #e62e00;  }}
          /* Красим заголовки только внутри .article, но не внутри .media */
@scope (.article) to (.media) {
  .title {
    color: #e62e00;
  }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Есть два способа задать область действия:

1. Явно указать селекторы в круглых скобках после @scope.

        
          
          /* Общий синтаксис */@scope (<корень>) to (<граница>) {  /* стили */}/* Граница необязательна */@scope (.component) {  /* стили применяются ко всем потомкам .component */}
          /* Общий синтаксис */
@scope (<корень>) to (<граница>) {
  /* стили */
}

/* Граница необязательна */
@scope (.component) {
  /* стили применяются ко всем потомкам .component */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

• «Корень» — селектор(ы), от которого начинается область (можно список через запятую).
• «Граница» — необязательный селектор(ы), до которого действует область. Потомки, лежащие внутри границы, исключаются.

2. Поместить @scope { ... } в тег <style>, находящийся в разметке внутри нужного контейнера. В этом случае корнём области становится ближайший контейнер, содержащий <style>.

        
          
          <article class="card">  <style>    @scope {      .title { color: rebeccapurple; }    }  </style>  <h3 class="title">Новость</h3>  <p>Текст…</p>  <footer class="card__footer">…</footer></article>
          <article class="card">
  <style>
    @scope {
      .title { color: rebeccapurple; }
    }
  </style>
  <h3 class="title">Новость</h3>
  <p>Текст…</p>
  <footer class="card__footer">…</footer>
</article>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Внутри @scope можно использовать псевдокласс :scope — он ссылается на корневой элемент области:

        
          
          @scope (.widget) {  :scope { display: block; }  :scope > .title { font-weight: 600; }}
          @scope (.widget) {
  :scope { display: block; }
  :scope > .title { font-weight: 600; }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Важно: @scope не меняет специфичность селекторов внутри блока и может свободно комбинироваться с @media, @supports, @layer и вложенностью селекторов.

@scope — это «микро‑каскад» внутри поддерева DOM. Вместо усиления специфичности или искусственного переименования классов, вы описываете правила, которые действуют только внутри выбранного контейнера и не «протекают» наружу. Это помогает:

• изолировать стили компонентов при повторном использовании;
• исключать внутренние области (через to (...)), например, медиа‑блоки или вложенные компоненты;
• писать предсказуемый CSS без борьбы за специфичность.

💡 Используйте to (...), чтобы исключить вложенные зоны (например, слоты, медиа, внешние виджеты).
💡 Совмещайте с :where() для безспецифичных служебных правил внутри @scope.
💡 Предпочитайте узкий корень области (.component вместо main) — так меньше неожиданных совпадений и быстрее рендеринг.
💡 Для виджетов, внедряемых в сторонние страницы, вариант со встроенным <style> ... @scope {} ... </style> особенно удобен.