Hacker News 中文摘要

RSS订阅

<template>：内容模板元素 -- <template>: The Content Template element

原文链接 | HN讨论 | 2025-09-03 05:42:27

文章摘要

<template>元素用于定义HTML模板，支持全局属性，并通过shadowrootmode属性为父元素创建影子根。shadowrootmode可以是open或closed，分别决定影子根是否对JavaScript可见。open模式推荐使用，closed模式则隐藏影子根。HTML解析器会在DOM中为第一个<template>元素创建ShadowRoot对象。

文章总结

标题：<template>：内容模板元素 - HTML | MDN

主要内容：

<template> 是 HTML 中的一个元素，用于定义可重复使用的 HTML 模板。该元素的内容在页面加载时不会被渲染，但可以通过 JavaScript 动态插入到 DOM 中。<template> 元素的主要用途包括生成文档片段和声明式 Shadow DOM。

关键点：

  1. 属性：

    • shadowrootmode：为父元素创建 Shadow DOM，支持 open 和 closed 两种模式。open 模式允许 JavaScript 访问 Shadow DOM，而 closed 模式则不允许。
    • shadowrootclonable：设置 ShadowRoot 的 clonable 属性为 true，允许克隆包含 Shadow DOM 的父元素。
    • shadowrootdelegatesfocus：设置 ShadowRoot 的 delegatesFocus 属性为 true，当选择 Shadow DOM 中的非可聚焦元素时，焦点会委托给树中的第一个可聚焦元素。
    • shadowrootserializable：设置 ShadowRoot 的 serializable 属性为 true，允许通过 Element.getHTML() 或 ShadowRoot.getHTML() 方法序列化 Shadow DOM。

  2. 使用说明：

    • <template> 元素的内容不会成为其子节点，而是通过 content 属性访问。content 属性返回一个 DocumentFragment，可以通过 cloneNode 方法克隆并插入到 DOM 中。
    • 如果 <template> 元素包含 shadowrootmode 属性，HTML 解析器会立即生成 Shadow DOM，并将其内容包裹在 ShadowRoot 中，附加到父元素上。

  3. 示例：

    • 生成表格行： 通过 JavaScript 使用 <template> 元素动态生成表格行并插入到现有表格中。
    • 声明式 Shadow DOM： 使用 shadowrootmode 属性创建 Shadow DOM，并展示其与全局样式的区别。
    • 委托焦点的 Shadow DOM： 使用 shadowrootdelegatesfocus 属性，展示焦点委托的效果。

  4. 避免 DocumentFragment 的陷阱：

    • 当使用 DocumentFragment 时，事件处理程序应附加到其子节点上，而不是 DocumentFragment 本身，以确保事件处理程序在插入 DOM 后仍然有效。

  5. 技术总结：

    • <template> 元素属于元数据内容、流内容、短语内容和脚本支持元素类别。
    • 其 DOM 接口为 HTMLTemplateElement，且不允许省略起始和结束标签。

相关链接： - part 和 exportparts 属性 - <slot> 元素 - 使用模板和插槽

最后修改时间： 2025年8月6日

帮助改进 MDN： 该页面是否对您有帮助？是 / 否

贡献指南： 了解如何贡献

评论总结

评论内容主要围绕 <template> 标签的使用和优缺点展开，观点多样，既有支持者也有质疑者。

支持使用 <template> 的观点： 1. 简化前端开发：多位开发者表示 <template> 标签在构建复杂 UI 时非常有用，尤其是在不使用大型框架的情况下。例如，mholt 提到他在 Timelinize 项目中大量使用 <template>，并认为它是布局组件的好方法。 - "The <template> tag is a great way to lay out components and then fill them in with simple JS functions." - "I’ve been using template elements a lot recently to render products on my wife’s photography blog." - nozzlegear

  1. 性能优势：jjcm 指出，<template> 在性能上略优于将 HTML 嵌入 JS 的方式，尤其是在 Web Components 中。
    • "Templates are solid and are slightly more performant than including your html-in-js for webcomponents."

质疑 <template> 的观点： 1. 功能有限：EGreg 认为 <template> 的主要功能是创建文档片段，功能较为单一，且在使用 JS 时可以通过其他方式实现类似效果。 - "What exactly is the point of <template> tag? Just to create document fragments?"

  1. 开发效率问题：mvdtnz 认为使用 <template> 创建表格行与从头开始创建相比，并没有明显的效率提升。
    • "It’s just as much work to create a table row using the template as doing it from scratch."

其他观点： 1. 现代 Web 开发的简化趋势：imiric 呼吁回归早期 Web 开发的简单性，认为现代 Web 技术（如 <template>）可以避免使用臃肿的框架，并提到一些新兴库（如 Nue、Lit）正在朝这个方向发展。 - "There is untapped potential for building modern web sites by leveraging standard web technologies, such as the template element." - "My wish is that modern web development can eventually not require any 3rd party libraries or frameworks."

  1. Web Components 的改进需求：jjcm 和 blittle 提到 Web Components 的使用体验有待改进，尤其是 HTML、JS 和 CSS 的整合方式。
    • "I really wish there was some sort of web component file format that incorporated: The HTML, The JS, The CSS." - jjcm
    • "Shopify heavily uses <template> elements with their Storefront Web Components project." - blittle

总结：<template> 标签在简化前端开发和提升性能方面受到认可，但其功能有限和开发效率问题也引发了一些质疑。同时，评论中反映出对现代 Web 开发简化和 Web Components 改进的期待。