HTML shadowrootslotassignment Attribute

HTML shadowrootslotassignment Attribute

The HTML shadowrootslotassignment attribute is an enumerated attribute used with a declarative shadow DOM <template>. It determines whether elements are automatically assigned to slots by name or must be manually assigned using JavaScript.

Elements That Use the shadowrootslotassignment Attribute

The shadowrootslotassignment attribute is used with the <template> element when declaring a shadow root.

Supported Values

The shadowrootslotassignment attribute accepts two values:

How shadowrootslotassignment Works

When a declarative shadow root is created, its slot assignment mode determines how nodes from the host element are assigned to <slot> elements in the shadow tree. The named mode performs this assignment automatically, while manual mode requires JavaScript to assign nodes explicitly.

<div>
  <template shadowrootmode="open" shadowrootslotassignment="named">
    <slot name="heading"></slot>
  </template>

  <h2 slot="heading">Web Design</h2>
</div>

In this example, the <h2> is automatically assigned to the slot named heading.

Named Slot Assignment

The named value uses normal automatic slot assignment. An element with a slot attribute is assigned to the first <slot> element in the shadow tree whose name value matches it.

<article>
  <template shadowrootmode="open" shadowrootslotassignment="named">
    <header>
      <slot name="title"></slot>
    </header>
    <slot></slot>
  </template>

  <h2 slot="title">HTML Tutorials</h2>
  <p>Learn HTML with practical examples.</p>
</article>

The heading is assigned to the named title slot. The paragraph has no slot attribute, so it is assigned to the default unnamed slot.

Manual Slot Assignment

The manual value prevents automatic slot assignment. Nodes must instead be assigned to individual <slot> elements using the assign() method.

<div id="component">
  <template shadowrootmode="open" shadowrootslotassignment="manual">
    <slot id="content-slot"></slot>
  </template>

  <p id="content">Manually assigned content</p>
</div>

<script>
const host = document.querySelector("#component");
const slot = host.shadowRoot.querySelector("#content-slot");
const content = host.querySelector("#content");

slot.assign(content);
</script>

Because the shadow root uses manual slot assignment, the paragraph is displayed through the slot only after it has been assigned with assign().

Default Value

The missing value default and invalid value default for shadowrootslotassignment are both the named state. This means that named slot assignment is used when the attribute is omitted or has an invalid value.

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

Because named is the default, it normally does not need to be written explicitly unless doing so makes the intended slot assignment behavior clearer.

Common Mistakes

Do not treat shadowrootslotassignment as a boolean attribute. It accepts the values named and manual.

Do not expect manual slot assignment to automatically match an element's slot attribute with a slot's name attribute. Manual mode requires nodes to be assigned using the assign() method.

Do not use shadowrootslotassignment without a valid shadowrootmode attribute when you intend to create a declarative shadow root. The slot assignment attribute does not create the shadow root by itself.

Do not assume the attribute must be set to named for normal named slots. Named slot assignment is already the default when the attribute is omitted.

Browser Support

Baseline: Limited availability indicates that a feature is not yet available in all core browsers. Use these features with caution because they may only work in select browsers, so additional compatibility checks may be needed before general use.

The shadowrootslotassignment attribute on the <template> element has limited availability and should be tested before it is relied on for production use.

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 shadowrootslotassignment Attribute

The example uses shadowrootslotassignment="named" to automatically assign the heading to a named slot and the paragraph to the default slot.

Summary

The HTML shadowrootslotassignment attribute is an enumerated attribute used with a declarative shadow DOM <template>. The named value automatically assigns nodes to matching slots and is the default, while manual requires nodes to be assigned using the HTMLSlotElement.assign() method. The attribute currently has limited browser availability.