[vue.js ]スコープ付きcssの適応範囲

Index

スコープ付きcssとは

公式ドキュメントによると。通常cssはすべてのコンポーネントに適応されてしまうが、その適応範囲を現在のコンポーネントに限定するためのものらしい。

<template>
    <Test></Test>
</template>
<style>

  .test {
    color:antiquewhite;
}

</style>

</template>

<style>

.test {

color:antiquewhite;

}

</style>

<template>
    <div class="test">bbbb</div>
    <br>
    <p class="test">aaaa</p>
    
    
</template>

<style>
.test {
    color: aqua;
}
</style>

<br>

</template>

<style>

.test {

color: aqua;

}

</style>

親のstyleが適応されてしまっています。

<template>
    <Test></Test>
</template>
<style scoped>

  .test {
    color:antiquewhite;
}

</style>

</template>

.test {

color:antiquewhite;

}

</style>

同じなので割愛

Test.vueのstyleが適応されています