HTML模板本身不提供样式隔离能力，必须配合attachShadow({mode:'closed'})将克隆的template.content挂载到封闭Shadow DOM中，才能实现真正的样式与DOM隔离。
HTML模板本身不提供样式隔离能力
直接用 <template> 标签包裹组件 HTML，不会自动隔离样式。它只是惰性容器，浏览器不会渲染、不解析内部 CSS，也不会阻止外部样式泄漏进来或内部样式逃逸出去。很多人误以为用了 <template> 就等于“封装”，结果在动态插入后发现样式被全局污染或失效。
真正起作用的是组合手段：比如把 <template> 和 Shadow DOM 配合使用，或者配合 CSS Scoped（如 Vue 的 scoped 属性）、CSS Modules 等构建时方案。
用 <template> + attachShadow() 实现真隔离
这是原生 Web Components 中最可靠的运行时隔离方式。关键不是模板本身，而是将模板内容克隆后挂载到 Shadow Root 下：
const template = document.getElementById('my-component');
const shadow = this.attachShadow({ mode: 'closed' });
shadow.appendChild(template.content.cloneNode(true));
-
mode: 'closed'能防止 JS 外部访问 Shadow Root，增强封装性；但调试时需注意 DevTools 里可能看不到节点（可临时切为'open'） -
cloneNode(true)必须加，否则模板内容被移动一次后就为空了，二次渲染会失败 - 模板内写的
<style>会随 content 一起进入 Shadow DOM，天然作用域限定——这是隔离生效的核心
和构建工具方案（如 Vue scoped）的本质区别
HTML 模板 + Shadow DOM 是运行时、浏览器原生的隔离；而 scoped 是构建时通过属性选择器（如 div[data-v-f3f3eg]）做 CSS 作用域模拟，不依赖 Shadow DOM，兼容性更好但非强隔离。
立即学习“前端免费学习笔记（深入）”；
两者不能混用：Vue 的 <template> 是编译上下文，和原生 <template> 标签语义不同；若在 Vue 组件中手动调用 attachShadow()，会破坏 Vue 的响应式挂载逻辑，导致 v-model、事件绑定等失效。
- 纯静态组件、需要跨框架复用 → 优先选
<template>+ Shadow DOM - 需要响应式、插槽、生命周期钩子 → 用框架方案（
scoped/ CSS Modules），别强行套 Shadow DOM - IE11 或旧版 Safari 不支持 Shadow DOM → 只能退回到属性选择器类方案
容易被忽略的样式穿透点
即使用了 Shadow DOM，仍有几个地方会“漏”：
-
::slotted()和:host是显式开放的入口，如果父组件给子组件传入 slot 内容，且未对slot内元素设置all: initial，外部样式仍可能影响它 - 继承属性（如
font-family、color）默认会从 light DOM 继承进 Shadow DOM，需主动重置：:host { all: initial; font-family: sans-serif; } - 自定义属性（
--my-color）能穿透 Shadow Boundary，是官方推荐的通信方式，但也意味着得小心命名冲突
模板只是起点，真正的隔离靠的是对 Shadow DOM 规则的理解和主动防御，而不是把样式塞进 <template> 就万事大吉。
