标签本身不自动激活 shadow dom，需通过 javascript 调用 attachshadow() 创建 shadow 树，并手动 clonenode(true) 后挂载模板内容。
template 标签本身不自动激活 Shadow DOM
很多人以为把 <template></template> 写进 HTML 就能“天然”配合 Shadow DOM 使用，其实不是。<template></template> 只是惰性容器，内容不会被解析、不会执行脚本、也不会触发样式计算——它只是存着，等你手动取出来用。Shadow DOM 的隔离（样式、DOM 查询、事件作用域）必须显式调用 attachShadow() 创建，且模板内容需要你主动 cloneNode(true) 后 appendChild() 进去。
常见错误现象：<template id="my-comp"><style>h1{color:red}</style>
<h1>Hello</h1></template> 直接放在页面里，但没 JS 操作，那这段样式和结构就永远“沉睡”，更不会产生任何 Shadow 边界。
- 必须用 JS 获取
<template></template>元素，不能只靠 HTML 声明 -
attachShadow({ mode: 'closed' })会彻底阻止外部 JS 访问 Shadow 树，调试困难；开发阶段建议先用'open' -
<template></template>中的<slot></slot>不会自动生效——只有在 Shadow 树中才被识别为插槽出口
如何正确把 template 内容注入 Shadow DOM
核心步骤就三行关键代码：取模板 → 克隆 → 挂载。漏掉 cloneNode(true) 是高频翻车点——直接 appendChild(template.content) 会把模板内容“搬走”，下次实例化就空了。
const tmpl = document.getElementById('my-comp');
class MyComponent extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
// ✅ 必须 clone，否则 content 被移走，无法复用
shadow.appendChild(tmpl.content.cloneNode(true));
}
}
customElements.define('my-component', MyComponent);
使用场景：适合封装可复用、带内联样式的轻量组件，比如按钮、卡片、表单控件。避免在 <template></template> 里写依赖全局 CSS 的选择器（如 .btn-primary），因为 Shadow DOM 下这些规则默认不穿透。
-
cloneNode(true)深克隆才能保留事件监听器占位（但绑定仍需在克隆后手动加） - 如果模板含
<script></script>，克隆后不会自动执行——Shadow DOM 不执行 template 中的脚本，需手动创建并 append - 动态传参？
<template></template>本身不支持表达式，得靠 JS 注入数据（例如用shadow.querySelector('h1').textContent = this.getAttribute('title')）
样式隔离失效的典型原因
写了 <style></style> 在 <template></template> 里，也成功挂进了 Shadow DOM，但颜色还是被外部 CSS 覆盖了？大概率是 CSS 特异性（specificity）或继承行为导致的假象。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
例如外部有 h1 { color: blue !important; }，而 Shadow 内 h1 { color: red; } 就会被压住——!important 在 Shadow 内外各自独立计算，但外部规则若带 !important 且选择器足够强，依然可能影响未加 Shadow 边界的元素（比如 slot 出来的节点）。
- Shadow 内样式只作用于 Shadow 树内部节点，对
<slot></slot>投影出的内容无效（投影内容样式由其原始宿主决定） - 想让 slot 内容响应 Shadow 样式？得用
::slotted(*)，但仅支持简单选择器，不能写::slotted(.foo span) - 避免用 ID 选择器（如
#header）——ID 在 Shadow 内虽有效，但跨实例易冲突，且不利于 SSR 或静态分析
兼容性与性能注意点
Chrome 35+、Firefox 63+、Safari 10.1+ 支持 attachShadow()，Edge 已随 Chromium 内核统一。但 IE 完全不支持，如需兼容，必须降级为常规 DOM + class 隔离方案。
性能上，<template></template> 本身零开销，但频繁克隆大型模板 + 大量自定义元素实例，可能触发重排。尤其当模板含大量 <img> 或第三方 widget 脚本时，要注意懒加载和生命周期控制。
- 不要在
connectedCallback里反复attachShadow()——已挂载过会抛Failed to execute 'attachShadow' on 'Element': Shadow root has already been attached - 服务端渲染（SSR）时，
<template></template>会被当作普通 HTML 发送到客户端，没问题；但 Shadow DOM 内容不会出现在初始 HTML 中，SEO 和首屏可见性需额外处理 - DevTools 里看 Shadow 树要打开设置 → “Preferences → Elements → Show user agent shadow DOM” 才能看到
#shadow-root节点
真正麻烦的从来不是怎么写出来，而是搞清哪些东西“看起来在 Shadow 里”，其实根本不在隔离范围内——比如 slot 投影、CSS 继承链、事件冒泡路径。动手前先用 DevTools 点开 shadow-root 看一眼真实结构，比读十遍文档都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
