css scope, scope 무시하기

프론트엔드

journey-dev 2024. 9. 22. 23:33

css scope

기본적으로 css는 전역으로 적용된다.

그러나 css scoping을 하면, 해당 컴포넌트 내에서만 한정적으로 적용할 수 있게 된다.

css 범위를 해당 컴포넌트로 제한하여, 컴포넌트간 스타일 충돌을 방지할 수 있다.

css scoping 적용하면 컴포넌트별로 랜덤한 접두사가 붙는다.

html 요소에는 고유한 랜덤 접두사가 추가되고, css에는 접두사가 포함된 셀렉터로 변환된다.
만약, 두 컴포넌트에서 동일한 클래스명을 쓰더라도 서로 다른 접두사가 추가되어 서로 충돌나지 않는다.

그러나 외부 UI라이브러리를 쓰다보면 scoping을 무시해야 할 때가 있다.

전역에서 하위 컴포넌트에 설정되있는 스타일을 직접 바꿔서 처리해야 하는 경우가 발생하곤 한다.

그럴 경우 vue에서는 ::v-deep 또는 :global 선택자를, vite에선 :global 선택자를 사용하여

css scoping을 무시할 수 있다.

.children은 이제 스코핑이 무시되어 랜덤한 접두사 같은것이 붙지 않고

그냥 순수 css처럼 되어 전역에 미치게 된다.