<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 Ð³..

ÐÐ°ÑÐµÐ³Ð¾ÑÐ¸Ð¸ ÐºÐ¾Ð½ÑÐµÐ½ÑÐ°	ÐÐ¾ÑÐ¾Ðº ÐºÐ¾Ð½ÑÐµÐ½ÑÐ°, ÑÐ¾Ð´ÐµÑÐ¶Ð°Ð½Ð¸Ðµ ÑÐ¾ÑÐ¼ÑÐ»Ð¸ÑÐ¾Ð²ÐºÐ¸
ÐÐ¾Ð¿ÑÑÑÐ¸Ð¼Ð¾Ðµ ÑÐ¾Ð´ÐµÑÐ¶Ð¸Ð¼Ð¾Ðµ	ÐÑÐ¾Ð·ÑÐ°ÑÐ½ÑÐ¹
Ð¡Ð¾Ð±ÑÑÐ¸Ñ	`slotchange`
ÐÑÐ¾Ð¿ÑÑÐº ÑÐµÐ³Ð¾Ð²	ÐÐµÑ, Ð¾ÑÐºÑÑÐ²Ð°ÑÑÐ¸Ð¹ Ð¸ Ð·Ð°ÐºÑÑÐ²Ð°ÑÑÐ¸Ð¹ ÑÐµÐ³Ð¸ Ð¾Ð±ÑÐ·Ð°ÑÐµÐ»ÑÐ½Ñ.
ÐÐ¾Ð¿ÑÑÑÐ¸Ð¼ÑÐµ ÑÐ¾Ð´Ð¸ÑÐµÐ»Ð¸	ÐÑÐ±Ð¾Ð¹ ÑÐ»ÐµÐ¼ÐµÐ½Ñ, ÐºÐ¾ÑÐ¾ÑÑÐ¹ Ð¿ÑÐ¸Ð½Ð¸Ð¼Ð°ÐµÑÑÐ¾Ð´ÐµÑÐ¶Ð°Ð½Ð¸Ðµ ÑÐ¾ÑÐ¼ÑÐ»Ð¸ÑÐ¾Ð²ÐºÐ¸
ÐÐ¾Ð¿ÑÑÑÐ¸Ð¼ÑÐµ ARIA-ÑÐ¾Ð»Ð¸	ÐÐµÑ
DOM-Ð¸Ð½ÑÐµÑÑÐµÐ¹Ñ	`HTMLSlotElement`

ÐÑÑÐ¸Ð±ÑÑÑ

name: ÐÐ°Ð·Ð²Ð°Ð½Ð¸Ðµ ÑÐ»Ð¾ÑÐ°.ÐÐ¼ÐµÐ½Ð¾Ð²Ð°Ð½Ð½ÑÐ¹ ÑÐ»Ð¾Ñ ÑÑÐ¾ ÑÐ»ÐµÐ¼ÐµÐ½Ñ <slot> Ñ Ð°ÑÑÐ¸Ð±ÑÑÐ¾Ð¼ name.

ÐÑÐ¸Ð¼ÐµÑÑ

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"
        >&lt;<slot name="element-name">NEED NAME</slot>&gt;</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>