<slot>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020년 1월.

HTML<slot> 요소는 웹 컴포넌트 사용자가 자신만의 마크업으로 채워 별도의 DOM 트리를 생성하고, 컴포넌트와 함께 표현할 수 있는 웹 컴포넌트 내부의 플레이스홀더입니다.

콘텐츠 카테고리	플로우 콘텐츠,구문 콘텐츠.
가능한 콘텐츠	투명.
이벤트	`slotchange`
태그 생략	불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.
가능한 부모 요소	구문 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할	없음
DOM 인터페이스	`HTMLSlotElement`

특성

이 요소는전역 특성을 포함합니다.

name: 슬롯의 이름.

예제

html

<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        >&lt;<slot name="element-name">NEED NAME</slot>&gt;</code      >      <i><slot name="description">NEED DESCRIPTION</slot></i>    </summary>    <div>      <h4>Attributes</h4>      <slot name="attributes"><p>None</p></slot>    </div>  </details>  <hr /></template>

참고 :온전한 예제는element-details(라이브로 보기)에서 볼 수 있습니다. 설명은템플릿과 슬롯 사용하기에서 확인할 수 있습니다.