The HTML element serves as a mechanism for holding HTML fragments, which can either be used later via JavaScript or generated immediately into shadow DOM.
This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2015.
Attributes This element includes the global attributes. 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. open Exposes the internal shadow root DOM for JavaScript (recommended for most use cases). closed Hides the internal shadow root DOM from JavaScript. Note: The HTML parser creates a ShadowRoot object in the DOM for the first in a node with this attribute set to an allowed value. If the attribute is not set, or not set to an allowed value — or if a ShadowRoot has already been declaratively created in the same parent — then an HTMLTemplateElement is constructed. A HTMLTemplateElement cannot subsequently be changed into a shadow root after parsing, for example, by setting HTMLTemplateElement.shadowRootMode . Note: You may find the non-standard shadowroot attribute in older tutorials and examples that used to be supported in Chrome 90-110. This attribute has since been removed and replaced by the standard shadowrootmode 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. 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 . shadowrootserializable Experimental 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 .
Usage notes This element has no permitted content, because everything nested inside it in the HTML source does not actually become the children of the element. The Node.childNodes property of the element is always empty, and you can only access said nested content via the special content property. However, if you call Node.appendChild() or similar methods on the element, then you would be inserting children into the element itself, which is a violation of its content model and does not actually update the DocumentFragment returned by the content property. Due to the way the element is parsed, all , , and opening and closing tags inside the template are syntax errors and are ignored by the parser, so
Template document fragment By default, the element's content is not rendered. The corresponding HTMLTemplateElement interface includes a standard content property (without an equivalent content/markup attribute). This content property is read-only and holds a DocumentFragment that contains the DOM subtree represented by the template. This fragment can be cloned via the cloneNode method and inserted into the DOM. Be careful when using the content property because the returned DocumentFragment can exhibit unexpected behavior. For more details, see the Avoiding DocumentFragment pitfalls section below.
Declarative Shadow DOM If the element contains the shadowrootmode attribute with a value of either open or closed , the HTML parser will immediately generate a shadow DOM. The element is replaced in the DOM by its content wrapped in a ShadowRoot , which is attached to the parent element. This is the declarative equivalent of calling Element.attachShadow() to attach a shadow root to an element. If the element has any other value for shadowrootmode , or does not have the shadowrootmode attribute, the parser generates a HTMLTemplateElement . Similarly, if there are multiple declarative shadow roots, only the first one is replaced by a ShadowRoot — subsequent instances are parsed as HTMLTemplateElement objects.
Generating table rows First we start with the HTML portion of the example. html
| UPC_Code | Product_Name |
Implementing a declarative shadow DOM In this example, a hidden support warning is included at the beginning of the markup. This warning is later set to be displayed via JavaScript if the browser doesn't support the shadowrootmode attribute. Next, there are two I'm in the DOM. I'm in the shadow DOM.
Declarative Shadow DOM with delegated focus This example demonstrates how shadowrootdelegatesfocus is applied to a shadow root that is created declaratively, and the effect this has on focus. The code first declares a shadow root inside a
Avoiding DocumentFragment pitfalls When a DocumentFragment value is passed, Node.appendChild and similar methods move only the child nodes of that value into the target node. Therefore, it is usually preferable to attach event handlers to the children of a DocumentFragment , rather than to the DocumentFragment itself. Consider the following HTML and JavaScript:
... continue reading