Vue Style scoped 동적 요소 style 적용하기..

개발

Jrady 2018. 12. 31. 12:17

Vue의 style scoped 같은 경우

컴포넌트를 컴파일 하게 될경우

각 요소마다

와 같이 data-v-c14f2f8c 가 붙게 된다

여기서 style scoped에

h3 {

color: red;

}

라는 것을 적게 되면

사실상

h3[data-v-c14f2f8c] {

color: red;

}

로 적용되는 것이다.

그런데 여기서

내가 jquery나 javascript로 동적요소를 append했다고 생각해보자

그렇다면

$('body').append('<h3>Hello</h3>');

를하게되면

<body>

<h3>Hello</h3>

</body>

가 있게 된다.

즉 h3은 [data-v-c14f2f8c]와 같은 속성을 가지지 않게 되므로 css가 적용되지 않는 다는 것이다. 해결방법은 다음에 이어 쓰도록 하겠다~