HTML slot Attribute

HTML slot Attribute

The HTML slot global attribute assigns an element to a named <slot> inside a shadow tree. It allows content from the shadow host to be placed into specific locations defined by the shadow DOM.

Elements That Use the slot Attribute

The slot attribute is a global attribute and can be used on HTML elements when they are children of a shadow host and need to be assigned to a named slot in that host's shadow tree.

slot Attribute Value

The value of the slot attribute is the name of the slot to which the element should be assigned.

<h2 slot="heading">HTML Tutorials</h2>

This element can be assigned to a <slot> whose name attribute is heading.

How slot Works

A shadow tree can contain one or more <slot> elements. Content placed inside the shadow host can use the slot attribute to identify the named slot where it should appear.

<article>
  <template shadowrootmode="open">
    <header>
      <slot name="heading"></slot>
    </header>
  </template>

  <h2 slot="heading">HTML Tutorials</h2>
</article>

The <h2> remains a child of the <article> in the document tree, but it is rendered in the position of the matching <slot name="heading"> inside the shadow tree.

Named Slots

A named slot uses the name attribute on the <slot> element. A child of the shadow host is assigned to that slot when its slot value matches the slot's name.

<div>
  <template shadowrootmode="open">
    <slot name="title"></slot>
    <slot name="description"></slot>
  </template>

  <h2 slot="title">HTML Attributes</h2>
  <p slot="description">Learn how HTML attributes work.</p>
</div>

The heading is assigned to the title slot, while the paragraph is assigned to the description slot.

Default Slot

A <slot> element without a name attribute is the default slot. Slottable children of the shadow host that do not have a slot attribute, or whose slot attribute has an empty value, can be assigned to the default slot.

<div>
  <template shadowrootmode="open">
    <slot></slot>
  </template>

  <p>This paragraph is assigned to the default slot.</p>
</div>

A default slot is useful for content that does not need a specific named destination within the shadow tree.

Matching slot and name

For named slot assignment, the value of the element's slot attribute must match the value of a <slot> element's name attribute.

<template shadowrootmode="open">
  <slot name="navigation"></slot>
</template>

<nav slot="navigation">
  Navigation content
</nav>

If no slot with the matching name exists in the shadow tree, the element is not assigned to a slot and does not appear through a slot in the shadow tree's rendered content.

Common Mistakes

Do not confuse the slot attribute with the <slot> element. The attribute identifies the named slot to which content should be assigned, while the element defines the insertion point inside the shadow tree.

Make sure the slot value exactly matches the corresponding <slot> element's name value. A different name prevents the element from being assigned to that slot.

Do not add a slot attribute when content should use the default unnamed slot. Content without a slot name can be assigned to the default slot.

Do not expect the slot attribute to move an element to a different location in the document tree. Slot assignment affects how content is rendered through the shadow tree while the element remains a child of its original shadow host.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The slot global attribute is widely supported in current core browsers as part of Shadow DOM slotting.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the slot Attribute

The example uses named slots for a heading and description. Each element uses a slot value that matches the corresponding <slot> element's name value.

Summary

The HTML slot global attribute assigns content from a shadow host to a named <slot> inside its shadow tree. The attribute's value matches the name of the desired slot. Content without a slot name can be assigned to a default unnamed slot. Slot assignment changes where content is rendered within the shadow DOM without changing the element's position in the document tree.