[vue] <style scoped>의 비밀

이번 포스트에서는 vue component의 <style scoped>의 동작에 대해서 살펴보자.

 

<style> vs <style scoped>

 

SFC와 style

SFC는 하나의 파일에 <template>, <style>, <script>가 들어간다. 문제는 최종적인 application은 SFC로 동작하지 않고 하나의 html 형태로 동작한다는 점이다.

이 상황에서 문제가 되는 것 중 하나가 <style>이다. CSS는 선택자 기반으로 동작하는데 StopWatch 컴포넌트에서 content라는 클래스에 적용된 CSS가 있을 때 우연히 GuguQuiz 컴포넌트에도 content 클래스가 있다면 두 개의 style은 충돌할 수밖에 없을 것이다.

 

<style scoped>

이 문제를 해결하기 위해서 Vue는 style 태그에 scoped 속성을 사용한다. scoped의 목적은 컴포넌트에 선언된 css를 그 컴포넌트에만 영향을 주게 하겠다는 것이다. scoped를 사용하면 생성되는 DOM 요소에 data-v-XXXX 형태의 특별한 attribute를 추가해준다.

scoped를 사용하지 않았을 때 DOM과 적용되는 CSS	scoped를 사용했을 때 DOM과 적용되는 CSS

하나의 component에는 여러 개의 <style>을 적용할 수 있다. 따라서 전역으로 모든 component에 적용할 필요가 있는 css는 <style>에 정의하고 해당 컴포넌트에만 한정하기 위해서는 <style scoped>로 작성해주면 된다.

 

부모 컴포넌트의 css

<style scoped>를 이용한 CSS 고립 작전은 상하 관계가 없는 경우에만 유효하다. 만약 상하 관계가 성립된다면 조상의 css는 자식에게 전달된다. 왜냐하면 조상의 attribute를 자식이 그대로 가지기 때문이다.

 

위와 같이 컴포넌트가 구성되었을 때 App의 DOM 은 아래와 같다.

따라서 자식들은 모두 부모에 적용된 CSS의 영향을 받게 된다.

심지어 CSS우선순위를 보면 부모의 <style>이 더 나중에 적용되어 우선순위가 높은 것을 알 수 있다.