The HTML shadowrootserializable attribute
Quick answer
The HTML shadowrootserializable attribute allows the declarative shadow root to be serialized back to HTML (e.g. via getHTML()). It is used on the <template> element (with shadowrootmode).
Overview
The shadowrootserializable attribute makes a declarative shadow root serializable. 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" shadowrootserializable> … </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 shadowrootserializable attribute do?
Makes a declarative shadow root serializable.
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 shadowrootserializable attribute?
It is an element-specific attribute, used on a <template> declaring a shadow root.