<template>: The Content Template element
8 days ago
- #HTML
- #Web Development
- #Shadow DOM
- The `<template>` HTML element holds HTML fragments for later use via JavaScript or immediate generation into shadow DOM.
- Attributes include `shadowrootmode` (values: `open`, `closed`), `shadowrootclonable`, `shadowrootdelegatesfocus`, and `shadowrootserializable` (experimental).
- Usage notes highlight that `<template>` content isn't rendered by default and must be accessed via the `content` property.
- Examples include generating table rows dynamically and implementing declarative shadow DOM with focus delegation.
- Avoid pitfalls with `DocumentFragment` by attaching event handlers to children, not the fragment itself.
- Technical summary covers content categories, permitted content, DOM interface (`HTMLTemplateElement`), and ARIA roles.
- Browser compatibility and related resources like slots, shadow DOM, and CSS scoping are also mentioned.