Scoped CSS, deep selector

scoped

<style> 태그에 범위가 지정된 속성이있는 경우 해당 CSS는 현재 구성 요소의 요소에만 적용된다. <style scoped>
이것은 Shadow DOM에서 발견되는 스타일 캡슐화와 유사한데, 다른 컴포넌트에 영향을 주고 싶지 않은 상황에서 사용한다.

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

실제로 렌더 된것을 보면 이렇게 되어있다.

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

hash 값이 붙어 그 요소한테만 css를 입히게 된다.

global & local 둘다 사용 가능

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>

Child 컴포넌트의 영향 여부, deep selector

scoped를 쓰게되면 부모 구성 요소의 스타일이 자식 구성 요소로 내려가지 않는다. 그런데 루트 노드는 부모의 scoped CSS 와 자식의 scoped CSS 모두에게 영향을받는다. 이것은 부모가 레이아웃 목적으로 자식 루트 요소의 스타일을 지정할 수 있도록 설계된 것이라고 한다.

그렇다면 만약 scoped를 쓰고나서 하위 컴포넌트 css 까지 조작하고 싶으면 어떻게 해야할까? 이때 사용하는 것이 deep selector다
">>>" combinator를 사용한다.

❗️sass와 같은 css 전처리기 사용시 >>>대신 ::v-deep을 사용해야 한다.

<style scoped>
.a >>> .b { /* ... */ }
</style>

라고 적으면

.a[data-v-f3f3eg9] .b { /* ... */ }

이렇게 컴파일된다.

참고 링크