선언적 Shadow DOM

기존 Shadow DOM은 JavaScript(attachShadow)를 통해 생성됩니다. 서버에서 렌더링되는 페이지에서는 JS가 실행될 때까지 섀도 트리가 비어 있으므로, 첫 바이트에서 완전한 HTML을 제공한다는 SSR의 목적이 무너집니다. 선언적 섀도 DOM이 이 문제를 해결합니다.

shadowrootmode="open"이 지정된 <template>은 HTML을 구문 분석하는 시점에 섀도 루트를 선언합니다. 브라우저는 부모 요소에 섀도 루트를 자동으로 연결하고, 템플릿의 콘텐츠를 섀도 트리로 사용합니다. JavaScript가 필요하지 않습니다.

선언적 섀도 DOM을 사용하면 진정한 서버 렌더링 웹 컴포넌트를 구현할 수 있습니다. 서버가 전체 섀도 트리를 인라인으로 출력하고, 브라우저는 JavaScript가 실행되기 전에 이를 구문 분석하여 연결합니다. 그러면 하이드레이션 JS가 완전히 렌더링된 기준 상태에서 이어서 동작할 수 있습니다. 프레임워크 SSR과 동등한 수준입니다.

명령형 attachShadow와 동일한 모드를 사용합니다. shadowrootmode="open"은 섀도를 element.shadowRoot로 노출하고, shadowrootmode="closed"는 이를 숨깁니다. 동작은 JavaScript로 연결한 대응 방식과 동일합니다.

브라우저는 <template shadowrootmode>를 처음 발견할 때 섀도 루트를 연결합니다. 한 번 연결되면 템플릿은 소비되므로, 나중에 이를 조회해도 아무것도 반환되지 않습니다. 이는 attachShadow의 생명 주기와 일치합니다. 요소가 존재하는 동안 섀도 루트가 유지됩니다.

라이트 자식(<template> 바깥에 있는 예시의 <p>)은 명령형 섀도 DOM에서와 마찬가지로 섀도 트리 내부의 <slot> 요소에 투영됩니다. 구성 방식은 동일하고, 연결 메커니즘만 다릅니다.

<my-card>가 등록된 사용자 지정 요소라면 업그레이드 과정은 attachShadow를 다시 호출하는 대신 이미 연결된 섀도 루트를 사용합니다. 사용자 지정 요소 클래스는 이를 새로 생성하지 않고 connectedCallback에서 this.shadowRoot를 읽을 수 있습니다.

Lit-html의 render, Astro 컴포넌트 및 여러 다른 프레임워크는 이제 SSR 출력의 일부로 선언적 섀도 DOM을 생성합니다. 직접 구현하는 것도 가능합니다. 문자열 템플릿 시스템이라면 무엇이든 shadowrootmode 템플릿을 작성할 수 있습니다.

선언적 섀도 DOM은 Chrome, Edge, Safari 및 Firefox에서 제공됩니다. 이전 브라우저는 <template> 요소를 조용히 무시합니다. 템플릿 내부의 콘텐츠가 보이지 않으므로 지원하지 않는 환경에서도 자연스럽게 기능이 축소됩니다.

더 폭넓은 지원이 필요하다면 작은 스크립트로 DOM을 순회하면서 template[shadowrootmode]를 실제 섀도 루트로 변환할 수 있습니다. 이후의 컴포넌트 업그레이드가 예상한 섀도 트리를 확인할 수 있도록 사용자 지정 요소를 등록하기 전에 실행하세요.

선언적 섀도 DOM은 구조를 중복합니다. 컴포넌트 클래스에 이미 포함된 <template> 콘텐츠가 HTML에도 존재하기 때문입니다. 같은 컴포넌트가 많은 페이지에서는 이로 인해 전송 데이터가 커집니다. 프레임워크는 중복을 제거하지만, 직접 만든 SSR에서도 같은 처리를 고려할 수 있습니다.

웹 컴포넌트를 제공하고 첫 바이트 렌더링이나 검색 엔진 최적화를 중요하게 생각한다면 지금 도입하세요. 이 기능은 안정적이고 지원도 충분하며, 웹 컴포넌트 기반 애플리케이션의 SSR을 크게 개선합니다. 섀도 DOM을 사용하지 않는 애플리케이션에는 적용되지 않습니다.

명령형 attachShadow와 비교할 때 선언적 섀도 DOM은 어떤 문제를 해결하나요?

선언적 섀도 DOM은 사용자 지정 요소 내부의 <template shadowrootmode="open">을 사용하여 구문 분석 시점에 섀도 루트를 연결하므로 JS가 필요하지 않습니다. 웹 컴포넌트에 진정한 SSR을 제공하며, 하이드레이션 전에 섀도 트리, 범위가 지정된 스타일, 슬롯이 모두 동작합니다. 모든 최신 브라우저에서 지원되고 이전 브라우저에는 폴리필을 사용할 수 있습니다. 프레임워크(Lit, Astro)는 이를 자동으로 생성합니다.