Widely availableSupported across all major browsers. Safe to use in production.
Text and structure Widely available

<slot>

The <slot> HTML element is a placeholder inside a web component where consumers of the component can insert their own markup.

Text and structure

Overview

The <slot> HTML element is a placeholder inside a web component where consumers of the component can insert their own markup.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<slot>
53
79
63
10
53
10
HTML attribute
name
53
79
63
10
53
10
DOM API
assignedSlot

The assignedSlot read-only property of the Element interface returns an HTMLSlotElement representing the slot element the node is inserted in.
53
79
63
10
53
10
slot

The slot property of the Element interface returns the name of the shadow DOM slot the element is inserted in.
53
79
63
10
53
10
HTMLSlotElement

The HTMLSlotElement interface of the Shadow DOM API enables access to the name and assigned nodes of an HTML slot element.
53
79
63
10
53
10
assignedElements

The assignedElements() method of the HTMLSlotElement interface returns a sequence of the elements assigned to this slot (and no other nodes).
65
79
66
12.1
65
12.2
assignedNodes

The assignedNodes() method of the HTMLSlotElement interface returns a sequence of the nodes assigned to this slot.
53
79
63
10
53
10
name

The name property of the HTMLSlotElement interface returns or sets the slot name. A slot is a placeholder inside a web component that users can fill with their own markup.
53
79
63
10
53
10
slotchange_event

The slotchange event is fired on an HTMLSlotElement instance (slot element) when the node(s) contained in that slot change.
53
79
63
10.1
53
10.3
assignedSlot

The read-only assignedSlot property of the Text interface returns the HTMLSlotElement object associated with the element.
53
79
63
10
53
10
Other
css.selectors.slotted

`::slotted`
50
79
63
10
50
10
html.global_attributes.slot

The slot global attribute assigns a slot in a shadow DOM shadow tree to an element: An element with a slot attribute is assigned to the slot created by the slot element whose name attribute's value matches that slot attribute's value. You can have multiple elements assigned to the same slot by using the same slot name. Elements without a slot attribute are…
53
79
63
10
53
10
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (10.1)
Implementation note
  • The `onslotchange` event handler property is not supported.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (10.3)
Implementation note
  • The `onslotchange` event handler property is not supported.

Syntax

HTML 
<!-- Shadow DOM テンプレート内 -->
<template id="card-template">
  <div class="card">
    <slot name="title">デフォルトタイトル</slot>
    <slot>デフォルトコンテンツ</slot>
  </div>
</template>

Live demo

slot. concept

Slot element is Shadow DOM inside. pre-sholda-.partcontent insertpossible.

PreviewFullscreen

Name withslot

Name attribute in multiple. slot block by, specific. position to content placement.

PreviewFullscreen

defaultcontent

Slot to insert that case is defaultcontent that display.

PreviewFullscreen

Use cases

  • Using <slot>

    The <slot> HTML element is a placeholder inside a web component where consumers of the component can insert their own markup.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Verify how this element is announced by screen readers.

Related links

Powered by web-features