HTML shadowrootclonable Attribute

HTML shadowrootclonable Attribute

The HTML shadowrootclonable attribute is a boolean attribute used with a declarative shadow DOM <template>. When present with shadowrootmode, it creates a shadow root whose clonable setting is enabled, allowing the shadow root to be included when its host element is cloned using supported cloning methods.

Elements That Use the shadowrootclonable Attribute

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

Boolean Attribute

The shadowrootclonable attribute is a boolean attribute. Its presence enables the clonable setting for the shadow root created from the declarative shadow DOM template.

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

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

How shadowrootclonable Works

When the browser processes a <template> with a valid shadowrootmode value, it can create a declarative shadow root on the template's parent element. Adding shadowrootclonable sets that shadow root's clonable property to true.

<div>
  <template shadowrootmode="open" shadowrootclonable>
    <p>This content is inside the shadow root.</p>
  </template>
</div>

The shadowrootclonable attribute does not create the shadow root by itself. A valid shadowrootmode attribute is needed for the template to declare a shadow root.

Using shadowrootclonable with shadowrootmode

The shadowrootclonable attribute is used together with shadowrootmode="open" or shadowrootmode="closed". The shadowrootmode attribute declares the shadow root and determines its mode, while shadowrootclonable determines whether that shadow root can be included during supported cloning operations.

<div>
  <template shadowrootmode="open" shadowrootclonable>
    <h2>Web Design</h2>
    <p>Shadow DOM content.</p>
  </template>
</div>

Without a valid shadowrootmode value, the <template> does not create a declarative shadow root, so shadowrootclonable does not enable clonable shadow-root behavior.

Cloning the Shadow Root

A clonable shadow root can be included when its host element is cloned using cloning operations that include clonable shadow roots. This is useful when a component containing declarative shadow DOM needs to be duplicated while retaining its shadow content.

For example, JavaScript can clone a host element with cloneNode(). When deep cloning is requested, a clonable shadow root on the host is cloned as part of the operation.

const copy = document.querySelector("#component").cloneNode(true);

The shadowrootclonable attribute controls whether the shadow root is eligible to participate in this behavior; it does not itself perform the cloning operation.

Common Mistakes

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

Do not write shadowrootclonable="false" to disable the feature. Because it is a boolean attribute, its presence enables the clonable setting. Omit the attribute when the shadow root should not be clonable.

Do not assume that shadowrootclonable automatically duplicates the element or its shadow root. It makes the shadow root eligible to be included by supported cloning operations.

Do not confuse shadowrootclonable with shadowrootmode. The first controls clonability, while the second is used to declare the shadow root and specify whether its mode is open or closed.

Browser Support

Baseline: Newly available indicates that a feature is supported in the latest stable version of each of the core browsers. Most users can use these features reliably, but they may not work in older browser versions.

The shadowrootclonable attribute on the <template> element is supported in the latest core browser versions, but older browser versions may not support it.

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

The example creates an open declarative shadow root with shadowrootclonable. The content displayed inside the bordered component belongs to its shadow root.

Summary

The HTML shadowrootclonable attribute is a boolean attribute used on a declarative shadow DOM <template>. When combined with a valid shadowrootmode attribute, it sets the resulting shadow root's clonable property to true, allowing the shadow root to be included when its host is duplicated by supported cloning operations.