attachShadow 및 Shadow Root

섀도 DOM은 요소에 자체적으로 격리된 DOM 트리("섀도 트리")를 제공하며, 이 트리는 페이지의 주 DOM에는 나타나지 않습니다. 외부 CSS는 안으로 유입되지 않고 내부 CSS는 밖으로 유출되지 않으므로 구성 요소를 완벽하게 캡슐화할 수 있습니다.

사용자 지정 요소의 생성자나 connectedCallback에서 this.attachShadow({ mode: "open" })을 호출하십시오. 이 메서드는 ShadowRoot를 반환하며, innerHTML, appendChild 등으로 일반 DOM 트리처럼 내용을 채울 수 있습니다.

mode: "open"은 섀도 트리를 element.shadowRoot로 노출합니다. mode: "closed"는 이를 숨기므로 element.shadowRoot는 null을 반환하고 외부 스크립트는 트리 안으로 들어갈 수 없습니다. 실제로 폐쇄형이 유용한 경우는 드뭅니다. 요소를 정의한 동일한 코드가 자체 참조를 보유할 수 있기 때문입니다.

섀도 트리 내부에 정의된 스타일(<style> 또는 채택된 스타일시트를 통해)은 해당 섀도 트리 내부에만 적용됩니다. 주 문서의 CSS 선택자는 섀도 트리의 하위 요소와 일치하지 않으며, 섀도의 스타일도 문서로 빠져나가지 않습니다.

섀도 트리 내부에서 호스트 요소(사용자 지정 요소 자체)는 특수 :host 의사 클래스로 선택합니다. :host(.large)는 호스트에 .large 클래스가 있을 때 일치하고, :host([disabled])는 호스트에 disabled 속성이 있을 때 일치합니다.

사용자 지정 요소의 기본값은 display: inline입니다. 섀도 루트 내부에 :host { display: block }을 적용하여 요소가 블록 수준 구성 요소처럼 동작하게 하십시오. 이를 잊으면 "너비 100%가 무시되는" 버그가 발생하는 흔한 원인이 됩니다.

섀도 트리 밖으로 버블링되는 이벤트는 호스트에서 대상이 재지정됩니다. 내부 버튼을 클릭하면 외부 리스너에는 event.target === host인 이벤트가 도착합니다. 실제 내부 대상을 확인해야 한다면 event.composedPath()를 사용하십시오.

섀도 루트 내부에서 전달된 사용자 지정 이벤트는 bubbles: true와 composed: true를 모두 사용해 생성하지 않으면 경계를 넘지 않습니다. composed가 없으면 호스트의 외부 리스너는 이벤트를 절대 감지하지 못합니다.

외부 스크립트는 호스트 요소는 조회할 수 있지만 그 섀도 자손은 조회할 수 없습니다. document.querySelector("my-card span")에서 <span>이 섀도 트리 안에 있으면 아무것도 반환하지 않습니다. 캡슐화는 내부가 우발적으로 결합되는 것을 막습니다.

요소의 HTML 안에 <template shadowrootmode="open">을 넣으면 JavaScript 없이도 브라우저가 구문 분석 시 섀도 트리를 구성합니다. 따라서 서버에서 렌더링된 구성 요소를 하이드레이션에 적합하게 만들 수 있습니다. JS가 실행되기 전에 섀도 트리가 이미 존재하기 때문입니다.

각 섀도 루트에는 추가 스타일 범위와 추가 렌더링 계층이라는 오버헤드가 있습니다. 섀도 루트 수백 개는 문제가 없지만 수만 개라면 영향을 줄 수 있습니다. 매우 고밀도인 사용자 인터페이스(대형 표, 가상화된 목록)에서는 프로파일링하여 섀도 DOM 비용을 감당할 수 있는지 확인하십시오.

open 모드가 closed 모드와 달리 제공하는 기능은 무엇입니까?

attachShadow({ mode: "open" })은 CSS와 ID가 어느 방향으로도 새어 나가지 않는 격리된 DOM 하위 트리를 생성합니다. :host로 호스트의 스타일을 지정하고, display: block을 기억하며, 경계를 벗어나야 하는 이벤트에는 composed: true를 사용하십시오. 그 밖에는 섀도 트리가 일반 DOM처럼 동작하므로 내부에서 innerHTML, appendChild, querySelector를 모두 정상적으로 사용할 수 있습니다.