콘텐츠 배포를 위한 slot 요소

HTML에서 사용자 지정 요소 내부에 작성한 자식은 해당 요소의 "라이트 DOM"을 구성하며, 섀도 트리 안에 있지 않습니다. 기본적으로 브라우저는 이를 렌더링하지 않으며, 섀도 트리가 <slot>을 통해 명시적으로 표시하도록 요청해야 합니다.

섀도 트리 내부의 <slot> 요소는 라이트 자식이 표시될 위치를 지정합니다. 이름이 없으면 기본 슬롯이 되며 호스트의 모든 직접 자식을 받습니다.

여러 슬롯을 이름으로 지정할 수 있습니다. 섀도 트리에서는 <slot name="header">를 선언하고, 사용자는 <h1 slot="header">로 사용을 선택합니다. 일치하는 slot 특성을 가진 자식은 해당 슬롯을 채우고, 일치하지 않는 자식은 기본 슬롯으로 들어갑니다.

슬롯 태그 사이의 콘텐츠는 해당 슬롯에 할당된 것이 없을 때만 렌더링됩니다: <slot>콘텐츠가 제공되지 않았습니다</slot>. 빈 슬롯에 자리 표시자나 안내 문구를 표시할 때 사용하십시오.

슬롯에 배치된 자식은 라이트 DOM에 그대로 남으며 섀도 트리가 아니라 기본 문서에서 스타일을 상속합니다. 섀도 트리 내부에서 ::slotted() 의사 요소를 사용하여 스타일을 지정하십시오: ::slotted(p) { color: red; }.

::slotted()는 호스트의 직접 자식, 즉 실제로 슬롯에 분배된 요소만 대상으로 지정할 수 있습니다. 해당 요소의 자손은 대상으로 지정할 수 없습니다. 더 깊은 수준의 스타일 지정이 필요하면 CSS 사용자 지정 속성을 노출하거나 섀도 내부 요소에 ::part를 대신 사용하십시오.

각 슬롯은 할당된 노드가 변경될 때 slotchange 이벤트를 발생시킵니다. 동적 콘텐츠 업데이트에 반응하려면 다음과 같이 수신하십시오: slot.addEventListener("slotchange", handler). 어떤 자식이 존재하는지에 따라 레이아웃이 달라지는 구성 요소에 유용합니다.

slot.assignedNodes()는 슬롯에 할당된 모든 노드를 반환합니다(텍스트 노드 포함). slot.assignedElements()는 Element 자식만 반환하므로, 일반적으로 슬롯에 배치된 콘텐츠를 프로그래밍 방식으로 순회할 때 원하는 결과에 해당합니다.

브라우저는 각 자식의 slot 특성을 기준으로 모든 분배를 자동으로 처리합니다. JavaScript 단계는 필요하지 않습니다. 호스트의 라이트 자식에 <span slot="footer">...</span>을 작성하면 해당하는 섀도 슬롯이 이를 포함합니다.

호스트 자체에 적용한 스타일(문서의 <my-card>에 설정한 스타일)은 슬롯에 배치되는 자식을 포함하여 라이트 자식으로 캐스케이드됩니다. 두 스타일이 같은 속성을 대상으로 할 때는 ::slotted를 통한 섀도 CSS가 호스트에서 상속된 스타일보다 더 높은 특이도를 가집니다.

헤더·본문·푸터 슬롯이 있는 카드, 제목·콘텐츠·동작 슬롯이 있는 대화 상자, 선행·후행 슬롯이 있는 목록 항목, 항목 슬롯이 있는 탐색 메뉴 등이 있습니다. 슬롯을 사용하면 <details>/<summary> 또는 <table>/<tr>와 같은 방식으로 사용자 지정 요소를 조합할 수 있습니다.

기본 슬롯과 이름이 지정된 슬롯의 차이는 무엇입니까?

슬롯은 라이트 DOM 자식을 섀도 트리의 특정 위치로 투영합니다. 기본 슬롯은 이름이 없는 자식을 모두 받고, 이름이 지정된 슬롯은 일치하는 slot 특성을 가진 자식을 받습니다. 대체 콘텐츠는 빈 슬롯을 채우고, ::slotted는 슬롯에 배치된 직접 자식의 스타일을 지정하며, slotchange 이벤트는 동적 콘텐츠 업데이트에 반응합니다.