The HTML shadowrootdelegatesfocus attribute
Quick answer
The HTML shadowrootdelegatesfocus attribute makes the declarative shadow root delegate focus to its first focusable element. It is used on the <template> element (with shadowrootmode).
Overview
The shadowrootdelegatesfocus attribute delegates focus into a declarative shadow root. 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" shadowrootdelegatesfocus> … </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 shadowrootdelegatesfocus attribute do?
Delegates focus into a declarative shadow root.
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 shadowrootdelegatesfocus attribute?
It is an element-specific attribute, used on a <template> declaring a shadow root.