65 Scoped CSS

source: categories/study/vue-experiance/vue-experiance_9-65.md

65 Scoped CSS (::v-deep 대신 :deep 사용~!)

scoped css / vue loader

<style> 태그에 scoped 범위 속성이 있는 경우 해당 CSS는 현재 컴포넌트의 요소에만 적용됩니다.
이것은 Shadow DOM에서 발견되는 스타일 캡슐화와 유사합니다.
몇 가지 주의사항이 있지만 폴리필이 필요하지 않습니다.
PostCSS를 사용하여 다음을 변환함으로써 달성됩니다.



<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>

로컬 및 글로벌 스타일 혼합

동일한 컴포넌트에 scoped 스타일과 non-scoped 스타일을 모두 포함할 수 있습니다.



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

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

하위 컴포넌트 루트 요소

scoped 속성이 정의되면 상위 컴포넌트의 스타일이 하위 컴포넌트로 누출되지 않습니다.
그러나 하위 컴포넌트의 루트 노드는 부모의 scoped CSS와 자식 컴포넌트의 scoped CSS 모두의 영향을 받습니다.
이것은 부모가 레이아웃 목적으로 자식 루트 요소의 스타일을 지정할 수 있도록 의도적으로 설계된 것입니다.

Deep Selectors

scoped 스타일의 선택기를 ‘deep' (즉, 자식 컴포넌트에 영향을 미치기를 원하면) >>> 결합기를 사용할 수 있습니다.



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

위 코드는 다음과 같이 컴파일됩니다:



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

sass와 같은 일부 전처리기는 >>>를 제대로 구문 분석하지 못할 수 있습니다.
이 경우 /deep/ 또는 ::v-deep 결합자를 대신 사용할 수 있습니다.
둘 다 >>>의 별칭이며 정확히 동일하게 작동합니다.
위의 예를 기반으로 이 두 표현식은 동일한 출력으로 컴파일됩니다.



<style scoped>
.a::v-deep .b { /* ... */ }
</style>



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

Dynamically Generated Content (동적으로 생성된 콘텐츠)

v-html로 만든 DOM 콘텐츠는 범위가 지정된 스타일의 영향을 받지 않지만 deep 선택기를 사용하여 스타일을 지정할 수 있습니다.

Also Keep in Mind (명심해야될 부분들)

scoped 스타일은 클래스의 필요성을 제거하지 않습니다. (클래스의 필요성이 여전히 있다는 뜻)
브라우저가 다양한 CSS 선택기를 렌더링하는 방식으로인해 p {color: red}는 scoped로 인해 범위가 지정될 때, (예시, data-sewf123)
즉, 이렇게 속성 선택기와 결합될 때 몇 배나 느려집니다. (인터넷 익스플로러)

.example { color: red }와 같이 클래스나 ID를 대신 사용하면 성능 저하를 거의 제거할 수 있습니다.

재귀 구성 요소의 자손 선택기에 주의하십시오!
선택기 .a .b가 있는 CSS 규칙의 경우 .a와 일치하는 요소에 재귀 하위 구성 요소가 포함되어 있으면 해당 하위 구성 요소의 모든 .b가 규칙과 일치합니다.
(음.. 무슨 뜻이지? 이건 무슨 뜻인지 잘 이해가안된다..)