HTML shadowrootserializable Attribute

HTML shadowrootserializable Attribute

The HTML shadowrootserializable attribute is a boolean attribute used with a declarative shadow DOM <template>. When present with shadowrootmode, it sets the resulting shadow root as serializable, allowing it to be included when HTML is serialized using supported serialization methods.

Elements That Use the shadowrootserializable Attribute

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

Boolean Attribute

The shadowrootserializable attribute is a boolean attribute. Its presence sets the serializable property of the shadow root created from the declarative shadow DOM template to true. When omitted, the value defaults to false.

<template shadowrootmode="open" shadowrootserializable>
  <p>Shadow content</p>
</template>

Because it is a boolean attribute, the presence of shadowrootserializable is what matters. It does not need a value such as true or false.

How shadowrootserializable Works

When the browser creates a declarative shadow root from a <template> with shadowrootserializable, the resulting shadow root is marked as serializable. This allows supported HTML serialization methods to include the shadow root when serialization of serializable shadow roots is requested.

<div id="component">
  <template shadowrootmode="open" shadowrootserializable>
    <p>This content is inside a serializable shadow root.</p>
  </template>
</div>

The attribute does not automatically serialize the shadow root. It marks the shadow root so that it can be included by a serialization operation that requests serializable shadow roots.

Using shadowrootserializable with shadowrootmode

The shadowrootserializable attribute does not create a shadow root by itself. It is used with a valid shadowrootmode="open" or shadowrootmode="closed" attribute on the same <template>.

<div>
  <template
    shadowrootmode="open"
    shadowrootserializable>
    <p>Serializable shadow content</p>
  </template>
</div>

The shadowrootmode attribute declares the shadow root, while shadowrootserializable determines whether that shadow root is marked as serializable.

Serializing the Shadow Root

A serializable shadow root can be included when HTML is serialized using the getHTML() method with the serializableShadowRoots option set to true.

const component = document.querySelector("#component");

const html = component.getHTML({
  serializableShadowRoots: true
});

When the shadow root is serializable, the resulting HTML can include declarative shadow DOM markup representing that shadow root. If serializableShadowRoots is not requested, serializable shadow roots are not automatically included in the serialization.

Common Mistakes

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

Do not write shadowrootserializable="false" to disable serialization. Because it is a boolean attribute, its presence enables the serializable setting. Omit the attribute when the shadow root should not be marked as serializable.

Do not assume that shadowrootserializable automatically converts the shadow root to an HTML string. It marks the shadow root as eligible for inclusion when a supported serialization method requests serializable shadow roots.

Do not assume that ordinary HTML serialization properties such as innerHTML or outerHTML include shadow roots. Use a supported getHTML() method when shadow-root serialization is required.

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

The example creates an open declarative shadow root with shadowrootserializable. The content is displayed normally, while the attribute marks the shadow root as serializable for supported serialization methods.

Summary

The HTML shadowrootserializable attribute is a boolean attribute used with a declarative shadow DOM <template>. When combined with a valid shadowrootmode attribute, it sets the resulting shadow root's serializable property to true. Serializable shadow roots can be included by supported getHTML() serialization methods when serialization of serializable shadow roots is requested.