Локальные стили

Компоненты Svelte могут включать элемент <style>, содержащий CSS, который принадлежит компоненту. Этот CSS по умолчанию ограничен областью видимости, что означает, что стили не будут применяться к элементам на странице вне рассматриваемого компонента.

Это достигается путем добавления класса к затронутым элементам, который основан на хеше стилей компонента (например, svelte-123xyz).

<style>
  p {
    /* это затронет только элементы <p> в этом компоненте */
    color: burlywood;
  }
</style>

Специфичность

Каждый селектор с ограниченной областью видимости получает увеличение специфичности 0-1-0, в результате добавления класса области видимости (например, .svelte-123xyz) к селектору. Это означает, что (например) селектор p, определённый в компоненте, будет иметь приоритет над селектором p, определённым в глобальной таблице стилей, даже если глобальная таблица стилей загружается позже.

В некоторых случаях класс области видимости должен быть добавлен к селектору несколько раз, но после первого вхождения он добавляется с :where(.svelte-xyz123), чтобы не увеличивать специфичность дальше.

Стилизация ключевых кадров

Если компонент определяет @keyframes, имя будет ограничено областью видимости компонента с использованием того же подхода хеширования. Любые правила animation в компоненте будут аналогично скорректированы:

<style>
  .bouncy {
    animation: bounce 10s;
  }

  /* эти ключевые кадры доступны только внутри этого компонента */
  @keyframes bounce {
    /* ... *.
  }
</style>