Shadow DOM

초안
이 문서는 작성중입니다.

Shadow DOM은 웹 컴포넌트 내에 존재하는 JavaScript, CSS, 템플릿 코드를 캡슐화 시킬 수 있는 기능을 가지고 있습니다. Shadow DOM 덕분에 이 코드들을 메인 문서의 DOM에서 분리할 수 있습니다. 웹 컴포넌트와 무관하게 Shadow DOM 만 따로 사용할 수도 있습니다.

왜 코드의 특정 부분을 따로 떼어 관리하고자 할까요? 한 가지 예를 들어보자면, 여러분이 큰 규모의 사이트를 관리하는 입장이라고 해봅시다. CSS를 신경써서 관리하지 않으면, 사이트 네비게이션에 들어가는 스타일이 예기치 못하게도 메인 콘텐츠 영역으로 "흘러 들어갈" 수 있습니다. 물론 그 반대의 경우도 일어날 수 있겠죠. 사이트나 앱의 규모가 커지면 커질수록 이러한 상황은 예방하기가 어려워집니다.

Shadow DOM 기초

항상 Shadow DOM은 이미 존재하는 요소에 붙어야만 합니다. 이러한 요소는 문자 그대로 HTML 파일 내에 요소이거나, 스크립트 언어에 의해 DOM에 추가된 요소일 수 있습니다. 또한 <div> 나 <p> 같은 원주(原住, native) 요소일 수도 있고, <my-element> 같은 사용자 정의(custom) 요소일 수도 있습니다. 다음 예제에서 볼 수 있듯이, Element.createShadowRoot()라는 구문을 사용하여 Shadow DOM을 붙입니다.

<html>
  <head></head>
  <body>
    <p id="hostElement"></p>
    <script>
      // 위에 등장하는 <p> 요소에 Shadow DOM을 붙입니다.
      var shadow = document.querySelector('#hostElement').createShadowRoot();
    </script>
  </body>
</html>

위 예시는 아직 콘텐츠도 가지고 있지 않은 <p> 요소에 Shadow DOM을 붙이는 코드입니다. 아직 화면에는 아무것도 표시되지 않습니다. 위의 예시 코드에 다음과 같은 코드를 덧붙인다면, Shadow DOM 안에 텍스트를 추가할 수 있습니다. 추가된 텍스트는 브라우저에 표시될 것입니다.

shadow.innerHTML = '<p>새로운 내용을 추가하였습니다.</p>';

Shadow DOM 꾸미기

Shadow DOM에 CSS를 추가하기 위해 <style> 요소를 사용합니다. 아래의 코드를 위의 예시에 덧붙인다면, Shadow DOM 텍스트의 색상은 붉은색으로 바뀝니다.

<script>
  // Shadow DOM을 생성합니다.
  var shadow = document.querySelector('#hostElement').createShadowRoot();
  // Shadow DOM 내부에 텍스트를 추가합니다.
  shadow.innerHTML = '<p>Here is some new text</p>';
  // 텍스트 색상을 붉은색으로 바꾸기 위해 CSS를 추가합니다.
  shadow.innerHTML += '<style>p { color: red; }</style>';
</script>

Shadow DOM의 구성

Shadow DOM 은 아래와 같은 요소들로 구성됩니다.

Element.attachShadow()
Element.getDestinationInsertionPoints()
Element.shadowRoot
<content> element
<shadow> element
다음 요소들은 스펙에서 삭제되었습니다: <content>, <element> and <decorator>
관련 API 인터페이스: ShadowRoot, HTMLContentElement and HTMLShadowElement
CSS 선택자:
- 가상 클래스: :host, :host(), :host-context()
- 가상 요소: ::shadow and ::content
- 조합자: >>> (formerly /deep/)*

* 자손 요소 결합자는 향후 삭제될 가능성이 있습니다.

인터페이스

ShadowRoot: 하위 DOM 트리의 루트 노드로써 문서의 주 DOM 트리와는 별도로 렌더링됩니다.
HTMLSlotElement: 요소가 들어갈 위치를 정의합니다.
DocumentOrShadowRoot: 문서와 Shadow 루트 사이를 이어주는 API를 제공합니다.

스펙

이름	상태	부가 설명
Shadow DOM	Working Draft	Initial definition.

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	53.0	No support	No support	?	No support

Feature	Android	Android Webview	Firefox Mobile (Gecko)	Firefox OS	IE Mobile	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	No support	53.0	No support	?	?	?	?	53.0