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 은 아래와 같은 요소들로 구성됩니다.

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

인터페이스

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

문서 태그 및 공헌자

태그: 
 이 페이지의 공헌자: u4bi, young-gratia, ingee.kim
 최종 변경: u4bi,