요약

  • W3C의 2012년 첫 공개 초안은 DOM 하위 트리 사이의 기능적 경계를 제안했다. 2014년 초안은 여러 트리의 합성을 강조했고, 2018년 노트는 관련 내용이 DOM, HTML, CSS Scoping, UI Events 등으로 옮겨지고 있다고 기록했다.
  • 현재 DOM 표준에서 페이지가 제공한 자식 노드는 shadow tree의 slot에 배정될 수 있다. 이때 원래 DOM 트리의 부모는 그대로다. CSS의 :host, ::slotted, ::part는 의도적으로 마련한 스타일 접점이다.

뉴스 카드 하나를 생각해 보자. 컴포넌트 제작자는 버튼과 테두리를 정성껏 만들었다. 페이지 편집자는 사진과 제목을 가져온다. 사이트 전체의 거대한 스타일시트가 카드 안까지 마구 들어오면 버튼은 어느 날 형광 초록색이 될 수도 있다. 반대로 카드를 꽁꽁 잠그면 사진을 넣을 방법이 없다. 필요한 것은 성벽보다 예약 가능한 출입구였다.

2012년 5월 22일 W3C 첫 공개 작업 초안은 하나의 문서 안에서 DOM 하위 트리 사이에 기능적 경계를 두는 구상을 설명했다. 컴포넌트는 내부 구조를 지키면서 페이지에 참여한다. 2014년 6월 17일 작업 초안은 여러 트리가 어떻게 하나의 보이는 구조로 합쳐지는지에 초점을 맞췄다. 당시 초안들은 오늘의 모든 구현을 그대로 찍은 사진이라기보다, 설계자가 풀려던 문제의 기록이다.

규칙의 주소는 이후 나뉘었다. 2018년 3월 1일 W3C 작업반 노트는 Shadow DOM의 내용이 DOM과 HTML, CSS Scoping, UI Events 명세에 편입되고 있다고 적었다. 집의 골조와 장식, 방문객이 움직일 때의 규칙이 각각 알맞은 도면으로 들어간 셈이다. 독립 문서가 맡던 역할은 달라졌고, 트리의 경계와 합성은 브라우저의 기본 규칙에 자리 잡았다.

현재의 WHATWG DOM Living Standard에서 페이지의 요소 하나는 shadow root와 그 아래 내부 트리의 host가 된다. 페이지가 host 아래에 둔 일반 자식 노드는 light tree에 남는다. 내부 트리의 slot은 그런 노드를 배정받아 최종 화면의 자리를 마련한다. 사진이 카드 맨 위에 보이더라도, 원래 DOM 노드 트리에서 사진의 부모가 shadow root로 바뀐 것은 아니다. 자리 배치와 소속은 다른 장부에 적힌다.

이 차이는 개발 도구를 켜는 순간 중요해진다. 화면에서는 사진과 버튼이 나란히 있어도, 하나는 페이지에서 왔고 다른 하나는 컴포넌트 안에 있을 수 있다. 어떤 slot에 손님이 오지 않으면 컴포넌트가 준비한 대체 내용을 보여 줄 수 있다. 보이는 위치만 따라가면 선택자가 왜 작동하지 않는지 헷갈린다. 먼저 노드가 어느 트리에 사는지 확인하면 이유가 드러난다.

스타일 쪽의 문턱은 CSSWG의 CSS Shadow Module Level 1 편집자 초안이 설명한다. 페이지의 일반 선택자가 shadow tree 내부의 모든 요소를 평범한 후손처럼 훑고 지나가지는 않는다. 컴포넌트는 필요한 손잡이를 따로 내놓을 수 있다. :host는 컴포넌트 스타일에서 host를 다루고, ::slotted는 배정된 내용에 제한적으로 접근한다. ::part는 바깥 페이지가 꾸밀 수 있도록 내부의 특정 부분에 이름을 붙인다. 문손잡이를 공개하는 일과 집 열쇠를 전부 내어주는 일은 다르다.

CSS 문서는 편집자 초안이므로 여기서는 설계의 접점을 설명하는 원문으로 읽는다. 2012년, 2014년, 2018년의 W3C 기록은 시간순 변화를 확인해 준다. 다섯 자료가 함께 보여 주는 것은 작성자 둘의 협업 계약이다. 페이지가 내용을 가져오고, 컴포넌트가 자리를 만들며, 브라우저가 소속을 지킨 채 하나의 화면을 구성한다.