Newly availableNewly available. Verify your target environments before adopting.
Metadata and scripts Newly available

Declarative shadow DOM

The shadowrootmode attribute on <template> creates a shadow root without the use of JavaScript. It is a declarative alternative to the attachShadow() method.

Metadata and scripts

Overview

The shadowrootmode attribute on <template> creates a shadow root without the use of JavaScript. It is a declarative alternative to the attachShadow() method.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
api.HTMLTemplateElement.shadowRootClonable
124
124
125
18
124
18
HTML attribute
shadowrootclonable

Sets the value of the clonable property of a ShadowRoot created using this element to true. If set, a clone of the shadow host (the parent element of this ) created with Node.cloneNode() or Document.importNode() will include a shadow root in the copy.
124
124
125
17.5
124
17.5
shadowrootdelegatesfocus

Sets the value of the delegatesFocus property of a ShadowRoot created using this element to true. If this is set and a non-focusable element in the shadow tree is selected, then focus is delegated to the first focusable element in the tree. The value defaults to false.
123
123
123
16.4
123
16.4
shadowrootmode

Creates a shadow root for the parent element. It is a declarative version of the Element.attachShadow() method and accepts the same enumerated values.
111
111
123
16.4
111
16.4
shadowrootserializable

Sets the value of the serializable property of a ShadowRoot created using this element to true. If set, the shadow root may be serialized by calling the Element.getHTML() or ShadowRoot.getHTML() methods with the options.serializableShadowRoots parameter set true. The value defaults to false.
125
125
18
125
18
DOM API
shadowRootDelegatesFocus

The shadowRootDelegatesFocus property of the HTMLTemplateElement interface reflects the value of the shadowrootdelegatesfocus attribute of the associated element.
123
123
123
18
123
18
shadowRootMode

The shadowRootMode property of the HTMLTemplateElement interface reflects the value of the shadowrootmode attribute of the associated element.
111
111
123
16.4
111
16.4
shadowRootSerializable

The shadowRootSerializable property reflects the value of the shadowrootserializable attribute of the associated element.
125
125
128
18
125
18
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (111)
Implementation note
  • Previously available under a different name: shadowroot (90)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (111)
Implementation note
  • Previously available under a different name: shadowroot (90)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (111)
Implementation note
  • Previously available under a different name: shadowroot (90)

Syntax

HTML 
<my-card>
  <template shadowrootmode="open">
    <style>
      :host { display: block; border: 1px solid #ccc; padding: 1rem; }
      ::slotted(h2) { color: #333; }
    </style>
    <slot name="title"></slot>
    <slot></slot>
  </template>
  <h2 slot="title">Card Title</h2>
  <p>Card Description</p>
</my-card>

Live demo

word Shadow DOM

HTMLinsideShadow DOM directlydefinition. with template shadowrootmode

PreviewFullscreen

JavaScript and. comparison

(JS) and word(HTML). Shadow DOM createside method. comparison.

PreviewFullscreen

shadowrootmode Value

Open and closed. Difference.

PreviewFullscreen

Use cases

  • Using Declarative shadow DOM

    The shadowrootmode attribute on <template> creates a shadow root without the use of JavaScript. It is a declarative alternative to the attachShadow() method.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Verify how this element is announced by screen readers.

Related links

Powered by web-features