The HTML shadowrootmode attribute
Quick answer
The HTML shadowrootmode attribute declares a declarative shadow root and whether it is open or closed. It is used on the <template> element.
Overview
The shadowrootmode attribute declares a declarative shadow root and whether it is open or closed. It applies to the <template> element.
Declarative Shadow DOM lets the server render a component's shadow tree in HTML, with no JavaScript — vital for server-side rendering of web components. open exposes the shadow root via element.shadowRoot; closed hides it.
Syntax
<host-el><template shadowrootmode="open"> … </template></host-el>Values
| Value |
|---|
| open | closed |
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 shadowrootmode attribute do?
Declares a declarative shadow root on a template.
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 shadowrootmode attribute?
It is an element-specific attribute, used on a <template> declaring a shadow root.