5. CSS Scoping

Блок <style> в .sharq — часть SFC (тот же файл, что и <template> и <script>). Есть два режима: global (по умолчанию) и scoped.

Глобальный <style> (по умолчанию, рекомендуется)

Без атрибута scoped CSS выводится как есть (raw) в сгенерированный USS компонента. Селекторы совпадают по имени класса в любом месте поддерева компонента, поэтому BEM-именование уже изолирует ваши стили:

<style>
.card { flex-grow: 1; background-color: #1f1f1f; }
.card__title { font-size: 18px; color: white; }
.card__title:hover { opacity: 0.8; }
</style>

/* Compiled Card.g.uss — identical, no rewriting: */
.card { flex-grow: 1; background-color: #1f1f1f; }
.card__title { font-size: 18px; color: white; }
.card__title:hover { opacity: 0.8; }

Совпадают и корневое правило (.card), и дочерние правила (.card__title), потому что элементы несут эти классы (из class="…" в шаблоне). Это надёжный вариант по умолчанию — предпочитайте его, используя уникальные BEM-имена классов (component__part) для изоляции.

Scoped <style scoped>

С scoped компилятор добавляет к каждому селектору class-scope компонента .s-{hash} и добавляет этот scope-класс только корню компонента (ApplyScopedAttribute → AddToClassList("s-xxxxxx") в сгенерированном Build()):

<style scoped>
.card { flex-grow: 1; }
.card:hover { opacity: 0.9; }
</style>

/* Compiled Card_scoped.g.uss: */
.card.s-a1b2c3 { flex-grow: 1; }
.card.s-a1b2c3:hover { opacity: 0.9; }

Поскольку scope-класс оказывается на корне, .card.s-a1b2c3 корректно совпадает с корнем.

Важное ограничение. Только корневой элемент получает .s-{hash} — дочерние элементы нет. Поэтому scoped-селектор для дочернего элемента, например .card__title, превращается в .card__title.s-a1b2c3, что требует обоих классов на одном и том же элементе и, соответственно, не будет совпадать с дочерними элементами. Используйте scoped-стили только для правил уровня root/host. Для стилизации дочерних элементов используйте глобальный <style> с BEM- именами классов (которые надёжно совпадают с дочерними элементами).

Компаньон-USS без scope (запасной вариант)

Для правил, которые нельзя выразить ни в одном из блоков — например, таргетинг компонента снаружи, или theme-уровневые переменные :root — положите рядом с компонентом unscoped USS (Resources/SusRuntime/Card.uss); он автоматически загружается в рантайме через LoadCompanionStyleSheets().

Имена сгенерированных файлов

Источник	Сгенерированный USS
Глобальный <style>	Component.g.uss
<style scoped>	Component_scoped.g.uss
inline style="…" на элементах шаблона	Component_static.g.uss

См. также формат .sharq — раздел Style.