template标签本身不提供样式隔离，真正实现隔离的是shadow dom；template仅作静态模板存放html片段，内容不渲染、不执行脚本，需通过attachshadow注入并克隆content才能启用样式作用域。

template 标签本身不提供样式隔离，它只是声明一段“惰性”HTML 模板；真正实现样式隔离的是 Shadow DOM —— template 是常用的模板来源，但隔离能力来自 attachShadow。

template 是“静态模具”，不是运行时组件

template 元素内容不会被浏览器渲染，也不会执行脚本、加载资源。它适合存放可复用的结构片段，比如按钮、卡片的 HTML 骨架。但仅靠 template，样式仍处于全局作用域，无法自动隔离。

• 写在 template 内的 style 标签（如 ）默认仍影响全局
• template 不创建作用域，也不触发任何封装机制
• 它的价值在于：避免重复解析、防止提前执行、便于 cloneNode() 复用

Shadow DOM 才是样式隔离的核心载体

将 template 的内容 append 到一个启用了 Shadow DOM 的元素上，才能启用真正的样式作用域。关键步骤是调用 element.attachShadow({ mode: 'closed' }) 或 'open'，再把 template.content.cloneNode(true) 注入其中。

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

• Shadow DOM 创建了一个独立的渲染树和样式上下文，外部 CSS 无法穿透，默认不继承父级样式（需显式设置 inherit）
• template.content 是 DocumentFragment，必须 clone 后插入，否则会被移走（只有一份）
• 推荐使用 mode: 'closed' 防止外部 JS 意外访问 shadowRoot，增强封装性

完整示例：封装带样式的按钮组件

以下代码展示如何结合 template 和 Shadow DOM 实现真正隔离：

<script><br> class MyButton extends HTMLElement {<br> constructor() {<br> super();<br> const shadow = this.attachShadow({ mode: 'closed' });<br> const template = document.getElementById('my-button');<br> shadow.appendChild(template.content.cloneNode(true));<br> }<br> }<br> customElements.define('my-button', MyButton);<br> </script>

注意：
– style 标签放在 template 内，但生效依赖于注入到 shadowRoot；
– :host 选择器专用于定位自定义元素自身（即 ）；
– slot 实现内容分发，保持组件灵活性。

常见误区与注意事项

开发者容易混淆 template 的作用边界，导致样式泄漏或渲染异常：

• 不要在 template 中直接写 —— 外部 CSS 文件会全局加载，破坏隔离；应内联 style 或用 constructable stylesheets（CSSStyleSheet API）
• 动态修改 shadowRoot 内容时，避免直接操作 template.content，应操作 shadowRoot 内已挂载的节点
• 若需复用同一 template 创建多个实例，每次都要 cloneNode(true)，否则第二次插入会为空
• Shadow DOM 内无法通过 document.querySelector 获取外部元素，也不响应外部事件委托（除非手动 dispatchEvent 并冒泡控制）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！