📚 Reference

📜 Chapter

Vue Loader (뷰 로더)

🔖 Index

Scoped CSS

1. 컴포넌트의 scoped 선언

<style> 태그가 scoped 속성을 가지고 있을 때, CSS는 현재 컴포넌트의 element에만 적용된다.
이는 shadow DOM에 있는 스타일 캡슐화와 유사하다.

2. Deep selectors

<style> 태그에는 scoped 속성을 가지고 있어야 적용된다.
component를 만들 때 스타일에 scoped를 적용하는 것은 중요하기 때문에 이걸 해제하지 않고 자식 component의 CSS를 적용하려면 Deep selector를 사용해야 한다.

Vue2

::v-deep 사용
- /deep/, >>> → deprecated
  - >>>
    - SCSS, SASS, LESS와 같은 일부 CSS 전처리 환경에서는 >>> 가 올바르게 동작하지 않을 수 있다.
- :deep()는 Vue 2에서 작동이 되지 않음. → :deep(<inner-selector>)
  - Vue3에서는 작동함.
  - ::v-deep 을 사용해야 함.
- 예시
```
<style scoped>
.a::v-deep .b { /* ... */ }
</style>
```
  - 이렇게 적용하면 모두 동일하게 아래와 같이 컴파일 되며 자식 component까지 접근이 가능하게 된다.
```
.a[data-v-f3feg9] .b{ /* ... */ }
```

Vue 3

:deep() 사용
/deep/, >>> → deprecated
::v-deep(.child-class) → deprecated
::V-deep .child-class → deprecated
::v-slotted, v-global 새로운 선택자가 생겨남.