[JavaScript][Vue]vue 컴포넌트에 상위 컴포넌트에서 css를 적용하면?

vue에 css를 적용한다면 제대로 적용이 될까?
사실 이런 방식으로 필자는 잘 사용하지 않았었는데 과거에 안됬던 기억이 있었기 때문이다.

<template>
    <div class="test">hi</div>
</template>

<script>
    export default {
        components: {},
        name: 'test'
    }
</script>

<style scoped>
    .test{
        width: 100px;
        height: 100px;
    }
</style>

가령 이러한 컴포넌트가 있다고 가정하자.

<div>
    <test style="background-color: red;"></test>
</div>

이제 상위 컴포넌트에서 이렇게 호출했다고 가정하자.

그러면 실제로 결과는 어떻게 될까?

보다시피 css가 제대로 적용된다.

옛날에 안됬던거 같은데... 옛날에도 됬나?

그래서 어떻게 번역되는지 한번 html로 찍어보자.

vue컴포넌트는 번역될때 루트 엘리먼트가 그대로 사용된다.

예를 들면 위의 경우 test 컴포넌트의 루트 엘리먼트는 div이므로 이 역시 div로 번역된다.

그리고 여러분이 지정한 test 컴포넌트는 div의 클래스 이름으로 들어가게 된다.

결론

vue 엘리먼트에 css, style, class등을 붙혀도 정상 작동 한다.