参考 CodeSandbox

Scoped CSS を使って、メンテナブルな CSS を書こう

<style> タグに scoped と書くことで、Scoped CSS の機能が発動する。

<style scoped>
</style>

Scoped CSS は、スタイルの有効範囲を "コンポーネント内 = 同ファイル内" に限定することができる

Scoped CSS で書いた style の内容は、"コンポーネント内" つまり同一ファイル内だけにその有効範囲が限定されます。（一点だけ例外があるので、後述します）

つまり、他の部分に影響を与えません。

これはメンテナブルなスタイル開発をしていく上で非常に便利な機能です。

scoped ではないので body が真っ赤に

<style>
body {
  background: red;
}
</style>

scoped なので body にあてようとしても範囲外のために無効

<style scoped>
body {
  background: red;
}
</style>