Web Components 是浏览器原生标准，可直接在 Vue 或 React 中使用：Vue 需用 v-bind 传参、@事件名 监听，React 需小写属性和 on事件名；均须提前全局注册并确保脚本加载完成。
Web Components 是浏览器原生支持的标准，不需要框架适配层就能在 React 或 Vue 项目中直接使用，关键在于正确注册、传参和事件绑定。
在 Vue 项目中直接使用 Web Components
Vue 对自定义元素开箱即用，但需注意属性传递和事件监听的写法差异：
- 属性（props）默认以小驼峰或短横线形式传入，建议用 v-bind 显式绑定，如
<my-counter :count="value"></my-counter>；若 Web Component 接收字符串属性，也可直接写<my-counter count="5"></my-counter> - 事件需用 v-on 监听，且事件名保持原样（不转驼峰），例如 Web Component 派发
on-change，就写@on-change="handleUpdate" - 若组件含 Shadow DOM 且需穿透样式，可在 Vue 的
<style scoped>中用::v-deep或:deep()（Vue 3）处理 - 确保 Web Component 已全局注册（如
customElements.define('my-counter', MyCounter)），通常放在main.js或入口逻辑中
在 React 项目中直接使用 Web Components
React 支持原生自定义元素，但 JSX 对属性名和事件有特殊规则，需稍作适配：
- HTML 属性名直接小写传入，如
count="10"、disabled；布尔属性建议显式赋值disabled={true} - 事件必须用 全小写 on + 原事件名，例如 Web Component 派发
itemclick，就写onitemclick={handleClick}；React 不会自动转换为驼峰 - 获取 Web Component 实例方法（如
play()、reset()）需用 ref，并在useEffect或componentDidMount中调用 - 避免用
className传类名给 Web Component，应改用class属性（JSX 允许原生 HTML 属性）
通用前提：确保 Web Component 已加载并注册
无论 React 还是 Vue，都依赖浏览器完成注册。常见做法：
立即学习“前端免费学习笔记（深入）”；
- 将 Web Component 脚本作为
<script type="module">引入 HTML，或通过import动态加载 - 检查控制台是否报错
Failed to execute 'define' on 'CustomElementRegistry'，说明重复注册或未等模块加载完成 - 推荐在框架启动前注册：Vue 中可在
createApp前执行；React 中在ReactDOM.createRoot前执行 - 如使用构建工具（Vite/Webpack），可通过
defineConfig的build.rollupOptions.external避免打包进框架代码，利于复用
调试与兼容性提示
遇到不渲染、事件不触发等问题时，可快速排查：
- 打开开发者工具 Elements 面板，确认自定义标签已存在且无
undefined状态 - 在 Console 执行
customElements.get('my-component')，返回构造函数说明注册成功 - Shadow DOM 内部样式无法被外部 CSS 影响，调试时切换到该节点的
Styles面板查看作用域样式 - 旧版 Safari（constructable stylesheets 支持有限，建议用
<style>标签注入样式
