HTML 5 에서 <style scoped>는 동작을 할까?

들어가며 . . .

이 글은 아직 모르는게 많은 프론트엔드 입문자가 쓴 글 입니다 .
잘못 된 정보가 있다면 댓글로 알려주시면 감사하겠습니다 !

시작

프론트엔드의 길을 막 걷기 시작했을 때, HTML 에 대해 알아가던 중 <style> 태그를 설명하던 블로그의 설명을 찾아 읽는 중이었는데, 나중에서야 Vue.js 에 대한 설명이란 걸 알아차렸습니다 . . .

<style scoped> ?

<style> 태그를 사용하면 Global 하게 스타일이 설정됩니다. 범위를 지정하여 사용하고 싶을 때 <style scoped> 태그에 속성을 붙이면 Local 하게 스타일을 설정할 수 있습니다.

  <article>
  <h1>Style Scoped</h1>
  <p>The scoped attribute for the style element will 
    eventually allow for you to include style elements 
    mid-document. To do this, you must mark up your style 
    element with the scoped attribute.</p>
  <section>
    <style scoped>
      p { color: red; }
    </style>
    <h2>How does it work?</h2>
    <p>Pellentesque habitant morbi tristique senectus
      et netus et malesuada fames ac turpis egestas.</p>
  </section>
</article>

Vue.js 에서

<style scoped> 태그를 사용하게 되면 다음과 같이 변환된다고 합니다.

<style scoped>
.example {
  color: red;
}
</style>

<template>
 <div class="example">example</div>
</template>

<style>
.example[data-v-f3f3eg9] {
 color: red;
}
</style>

<template>
 <div class="example" data-v-f3f3eg9>example</div>
</template>

HTML 에서는?

기존의 HTML4 파일에는 사용되었던 "style" 태그의 "scoped" 속성은 현재 HTML5에서 사용되지는 않습니다. 그나마 사용되던 Firefox 마저도 55버전 이후 지원이 되지 않게되었고, 이후로 기능을 사용하려면 명시적으로 활성화 해야됬었지만 지금은 지원을 하지 않게 되었습니다.

다시 사용될까?

거의 사라진 기능 치고는 필요하다는 의견과 필요하지 않다는 의견이 공존하여 조금 복잡 미묘했다. 개인적으로는 반드시 필요할 것 같은 기능은 아니고, 협업하는 과정에서는 오히려 문제를 찾는데 더 어려움을 줄 수도 있겠다는 생각이 들었다.

http://html5doctor.com/the-scoped-attribute/

참조

https://vue-loader-v14.vuejs.org/kr/features/scoped-css.html
https://developer.mozilla.org/ko/docs/Web/HTML/Element/style
https://github.com/w3c/csswg-drafts/issues/3547