The HTML shadowrootclonable attribute
Quick answer
The HTML shadowrootclonable attribute makes the declarative shadow root clonable, so it is copied when its host is cloned. It is used on the <template> element (with shadowrootmode).
Overview
The shadowrootclonable attribute makes a declarative shadow root clonable. It is used on a <template> declaring a shadow root.
It is part of declarative shadow DOM: placed on a <template>, it tells the parser to attach a shadow root, letting servers render web-component shadow DOM as plain HTML with no JavaScript.
Syntax
<template shadowrootmode="open" shadowrootclonable> … </template>Values
| Value |
|---|
| A boolean attribute — present or absent. |
Best practices
- Use
shadowrootmode="open"(orclosed) on a <template> to declare a shadow root. - Reach for declarative shadow DOM for server-rendered web components.
- Check browser support, as these attributes are relatively new.
- Combine with slot and part to project and style content.
Frequently asked questions
What does the shadowrootclonable attribute do?
Makes a declarative shadow root clonable.
What is declarative shadow DOM?
Shadow DOM declared in HTML via
<template shadowrootmode>, so a server can render component shadow trees without JavaScript.When would I use these attributes?
When server-rendering web components, so their shadow DOM exists in the initial HTML.
Which elements use the shadowrootclonable attribute?
It is an element-specific attribute, used on a <template> declaring a shadow root.