Web Components核心由Custom Elements、Shadow DOM和HTML Templates三大规范组成：Custom Elements定义自定义标签，Shadow DOM实现样式与DOM隔离，HTML Templates提供可复用的声明式模板。
直接检测浏览器是否支持 Web Components，核心是分项验证三大规范：Custom Elements、Shadow DOM 和 HTML Templates。不能只查“Web Components”这个统称，因为各部分支持情况不同，且旧版浏览器可能只支持其中一两个。
查 Custom Elements 是否可用
这是定义自定义标签（如
-
✅ 推荐写法：
typeof customElements !== 'undefined' && typeof HTMLElement !== 'undefined' -
⚠️ 避免误判：不要只用
'customElements' in window，IE11 虽有该属性但不真正支持；也不要依赖customElements.define是否存在——它在 Safari 10.1+ 才稳定，早期版本会报错
查 Shadow DOM 是否启用
Shadow DOM 决定样式和 DOM 是否隔离。检测重点是能否成功挂载影子根节点：
-
✅ 安全检测：创建元素后调用
element.attachShadow({ mode: 'open' })，捕获异常并检查返回值是否为ShadowRoot实例 -
⚠️ 注意兼容细节：Safari 10.1+ 支持，但必须开启“开发者菜单 → Experimental Features → Shadow DOM”；iOS Safari 16.4 之前对
slot渲染有 bug，内容可能被隐藏
查 HTML Templates 是否就绪
标签用于声明不立即渲染的结构，是 Web Components 的模板基础：
-
✅ 简单有效：
document.createElement('template') instanceof HTMLTemplateElement -
✅ 兜底验证：创建
content属性是否存在且为DocumentFragment - ? 小提示：该特性支持率高达 97%，几乎所有现代浏览器都原生支持，IE11 需 Polyfill
用 Modernizr 或 caniuse 辅助验证
开发阶段可借助工具快速确认：
-
? Modernizr：勾选
customelements、shadowdom、template三项生成精简版，通过Modernizr.customelements等布尔值判断 -
? caniuse.com：分别搜索
custom-element、shadowdom、template，重点关注 “Known issues” 栏目——比如 Safari 对attachShadow在 iframe 中的限制
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
