HTML5Rocks/KO: [튜토리얼/한글화] Shadow DOM 301: 고급 개념과 DOM API (Shadow DOM 301: Advanced Concepts & DOM APIs)

2014년 1월 6일 월요일

[튜토리얼/한글화] Shadow DOM 301: 고급 개념과 DOM API (Shadow DOM 301: Advanced Concepts & DOM APIs)

HTML5Rocks의 Shadow DOM 관련 튜토리얼 중 마지막 글인 +Eric Bidelman의 '섀도 DOM 301: 고급 개념과 DOM API (Shadow DOM 301: Advanced Concepts & DOM APIs)' 튜토리얼의 한국어 번역이 업데이트되었습니다.

웹 컴포넌트 관련 튜토리얼마다 말씀드리는 내용입니다만 Shadow DOM 역시 이전의 Custom Element나 HTML Imports처럼 웹 컴포넌트를 지탱하는 4가지 규격 중의 하나입니다. Shadow DOM은 DOM에 대한 캡슐화(Encapsulation)와 같은 매우 강력한 기능을 제공합니다. 이 튜토리얼은 여러개의 Shadow root 사용하는 방법과 호스트의 Shadow tree를 얻고, 자바스크립트을 통한 Shadow DOM의 구축 및 삽입지점을 통한 동작에 대해 논의합니다. 그리고 Shadow DOM을 쉽게 이해할 수 있도록 만들어진 도구인 Shadow DOM Visualizer와 이벤트 모델의 동작 방식을 소개합니다.

"Shadow DOM이 컴포넌트를 구성하는 DOM을 감추는 역할(encapsulation)을 하고 HTML Template가 DOM의 복제 및 재 사용성을 제공하며 Custom Element는 웹 문서에서 사용할 엘리먼트를 모듈에서 직접 등록할 수 있도록 하는 기능을 제공하여 컴포넌트의 명시적인 alias를 선언하는 역할을 한다면 HTML Imports는 웹 문서 내에 외부 리소스를 포함(Import)하기 위한 기능을 제공합니다."

TL;DR;

Shadow DOM은 DOM에 대한 캡슐화(Encapsulation)와 같은 매우 강력한 기능을 제공합니다. 이 튜토리얼은 Shadow DOM 101과 Shadow DOM 201에서 다뤘던 개념들을 기초로 하여 고급 개념과 활용 방법에 대해 논의합니다.

Shadow DOM을 호스팅하는 엘리먼트도 한번에 하나 이상의 Shadow Root를 호스팅할 수 있습니다. 호스트에 추가된 섀도 트리들은 그들이 추가된 순서대로 스택에 쌓이며 가장 최근에 추가된 것부터 시작합니다. 따라서 만약 여러개의 <shadow> 삽입지점들이 섀도 트리 내에 존재한다면 첫번째만이 인식되며 나머지는 무시되고 렌더링됩니다.

또한 만약 자바스크립트에서 DOM을 구축하는 것을 선호한다면, HTMLContentElement과 HTMLShadowElement는 그를 위한 인터페이스를 가지고 있으며 Shadow DOM 내의 <content>내로 탐색은 원칙적으로 불가능하나 .getDistributedNodes() API나 .getDestinationInsertionPoints()를 통해 액세스할 수 있습니다.

삽입지점(Insertion Point)은 DOM이 실제로 이동하는 것이 아니라 삽입지점이 가르키고 있는 위치에 대해 마치 DOM이 존재하는 것처럼 렌더링하고 동작하는 것을 뜻합니다. 이러한 이유로 여러분의 DOM 트리는 여전히 원래 상태대로 유지되고 있지만 실제 렌더링 결과는 DOM이 그리로 이동하거나 복사된 것처럼 동작합니다.

이벤트는 Shadow Root의 상위 경계가 제공하는 캡슐화(Encapsulation)을 유지하기 위해 Shadow DOM으로 이동한 내부 엘리먼트들로 대상을 재설정되며 abort, error, select, change,load, reset, resize, scroll, selectstart와 같은 이벤트들은 Shadow Boundary 간의 전달이 일어나지 않습니다.