Правило @scope

До появи @scope у нас були дві великі проблеми: Витік стилів коли глобальні стилі випадково змінювали вигляд дрібних компонентів та 
коли доводилося писати довжелезні селектори, щоб «перебити» стандартні налаштування.

Як працює правило синтаксис @scope?

Правило @scope приймає два основні параметри:

• Scope root (Корінь): Звідки починається область дії.
• Scope limit (Межа): Де область дії закінчується (опціонально).

@scope (.card) {
  /* Ці стилі застосуються ТІЛЬКИ до елементів всередині .card */
  img {
    border-radius: 50%;
  }
  
  .title {
    color: var(--primary-color);
  }
}

Ви можете задати межу, після якої стилі перестають діяти. Наприклад, ви хочете стилізувати статтю, але не хочете чіпати коментарі всередині неї.

@scope (.article) to (.comments-section) {
  p {
    color: #333;
    line-height: 1.6;
  }
}

Джерело: MDN-дивитись