<template>: The Content Template Element The HTML <template> element holds HTML fragments that can be used later via JavaScript or generated immediately into shadow DOM. Its content is not rendered directly in the document. --- Key Features Stores HTML fragments in a DocumentFragment accessible via the content property. Supports Declarative Shadow DOM via attributes like shadowrootmode. Allows cloning and insertion of template content into the DOM using JavaScript. Template content is inert and not part of the active DOM until instantiated. --- Attributes Global attributes apply. shadowrootmode: Declaratively creates a shadow root on the parent element. Values: open (exposes shadow root to JS), closed (hides shadow root). Replaces the <template> with the shadow root content. shadowrootclonable: If true, cloning the shadow host clones its shadow root. shadowrootdelegatesfocus: If true, focus on a non-focusable shadow element delegates to the first focusable element. shadowrootserializable (Experimental): Allows the shadow root to be serialized. Notes: Only one declarative shadow root per parent is supported; others fall back to template elements. Older non-standard shadowroot attribute replaced by shadowrootmode. --- Usage Notes The <template> element's direct children are inert; its childNodes property is empty. The content property returns a DocumentFragment with the template's DOM subtree. You cannot add children by DOM methods directly on <template> without violating its content model. Tags like <html>, <head>, and <body> inside the template are ignored by the parser. --- Ways to Use <template> Template Document Fragment Content is stored in content (a DocumentFragment) and can be cloned and inserted into the live DOM. Be cautious: when appending a DocumentFragment, child nodes are moved individually. Event listeners should be attached to children, not the fragment itself, to avoid unexpected behavior. Declarative Shadow DOM Using shadowrootmode="open" or shadowrootmode="closed" triggers immediate shadow DOM creation. The template’s content is wrapped inside a shadow root attached to the parent element. This is equivalent to calling Element.attachShadow() programmatically. --- Examples Generating Table Rows (JavaScript) Define a <template> inside HTML representing a table row. Use JS to clone the template content and fill it with data. Append the cloned fragment into the table <tbody>. Declarative Shadow DOM with Scoped Styles <template shadowrootmode="open"> creates a shadow root replacing the template. Inside the template, you can add scoped styles affecting only the shadow DOM. You can detect browser support for shadowrootmode by checking the existence of HTMLTemplateElement.prototype.shadowRootMode. Declarative Shadow DOM with Delegated Focus Using the attribute shadowrootdelegatesfocus allows focus to be delegated to the first focusable element inside the shadow tree when a non-focusable element is clicked. Enhances accessibility and keyboard navigation within shadow DOM. --- Avoiding DocumentFragment Pitfalls When appending a DocumentFragment, only its children are moved; listeners on the fragment itself are lost. Attach event handlers to the cloned children instead of the fragment to ensure behavior works after insertion. --- Technical Summary | Property | Description | |-----------------------|---------------------------------------------------------------------------------| | Content categories | Metadata content, flow content, phrasing content, script-supporting element | | Permitted content | None (content accessed via content property) | | Tag