HTML Templates
E856207
HTML Templates are a web platform feature that lets developers define inert chunks of HTML markup for later cloning and insertion into the DOM, enabling efficient, reusable UI structures.
Statements (48)
| Predicate | Object |
|---|---|
| instanceOf |
DOM feature
ⓘ
HTML feature ⓘ Web platform feature ⓘ |
| associatedDOMInterface | HTMLTemplateElement GENERATED ⓘ |
| benefit |
Avoids string-based HTML concatenation in JavaScript
ⓘ
Improves maintainability of markup ⓘ Reduces DOM construction overhead ⓘ |
| browserSupport | Supported by all modern browsers ⓘ |
| canContain |
Any valid HTML content
ⓘ
Custom elements ⓘ Script elements ⓘ Style elements ⓘ |
| contentIs |
Inactive until cloned or inserted
ⓘ
Not part of the main document DOM tree ⓘ Not rendered when parsed ⓘ |
| contentStoredIn | DocumentFragment ⓘ |
| contentType | DocumentFragment node ⓘ |
| definedBy | HTML Living Standard NERFINISHED ⓘ |
| enables |
Efficient DOM insertion
ⓘ
Reusable UI structures ⓘ |
| hasCharacteristic |
Inert images and media do not load until inserted
ⓘ
Inert scripts inside templates do not execute until moved into document ⓘ Styles inside templates do not apply until inserted ⓘ |
| hasElementName | template ⓘ |
| hasProperty | content ⓘ |
| introducedIn | HTML5 era ⓘ |
| lifecycle | Parsed once and cloned many times ⓘ |
| parsingBehavior |
Content not executed or loaded until adopted into document
ⓘ
Content parsed but not rendered ⓘ |
| primaryUse |
Cloning and inserting predefined DOM structures
ⓘ
Defining inert chunks of HTML markup ⓘ |
| standardizedBy |
W3C HTML Working Group (historically)
NERFINISHED
ⓘ
WHATWG NERFINISHED ⓘ |
| supports |
Client-side templating patterns
ⓘ
Declarative definition of DOM subtrees ⓘ Lazy instantiation of UI ⓘ Shadow DOM composition patterns ⓘ Web Components usage ⓘ |
| supportsMethod |
Node.cloneNode
NERFINISHED
ⓘ
content.cloneNode ⓘ |
| usedFor |
Client-side rendering
ⓘ
Cloning repeated list items ⓘ Predefined dialog or widget markup ⓘ Separating structure from data ⓘ |
| usedWith |
JavaScript
NERFINISHED
ⓘ
Shadow DOM NERFINISHED ⓘ Web Components NERFINISHED ⓘ |
| usesHTMLTag | <template> ⓘ |
Referenced by (1)
Full triples — surface form annotated when it differs from this entity's canonical label.