<slot>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
HTML <slot> 요소는 웹 컴포넌트 사용자가 자신만의 마크업으로 채워 별도의 DOM 트리를 생성하고, 컴포넌트와 함께 표현할 수 있는 웹 컴포넌트 내부의 플레이스홀더입니다.
| 콘텐츠 카테고리 | 플로우 콘텐츠, 구문 콘텐츠. |
|---|---|
| 가능한 콘텐츠 | 투명. |
| 이벤트 | slotchange |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | HTMLSlotElement |
특성
예제
html
<template id="element-details-template"> <style> details { font-family: "Open Sans Light", Helvetica, Arial, sans-serif; } .name { font-weight: bold; color: #217ac0; font-size: 120%; } h4 { margin: 10px 0 -8px 0; background: #217ac0; color: white; padding: 2px 6px; border: 1px solid #cee9f9; border-radius: 4px; } .attributes { margin-left: 22px; font-size: 90%; } .attributes p { margin-left: 16px; font-style: italic; } </style> <details> <summary> <code class="name" ><<slot name="element-name">NEED NAME</slot>></code > <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i> </summary> <div class="attributes"> <h4>Attributes</h4> <slot name="attributes"><p>None</p></slot> </div> </details> <hr /> </template> 참고 : 온전한 예제는 element-details(라이브로 보기)에서 볼 수 있습니다. 설명은 템플릿과 슬롯 사용하기에서 확인할 수 있습니다.
명세
| Specification |
|---|
| HTML # the-slot-element |
| DOM # shadow-tree-slots |
