Web Components 是跨框架组件的底层事实标准，其核心由 Custom Elements、Shadow DOM 和 HTML Templates 三者构成；Custom Elements 实现自定义标签注册与激活，Shadow DOM 提供样式与结构隔离，HTML Templates 支持声明式结构复用，三者协同实现真正封装、可复用、框架无关的原生组件。
Web Components 是跨框架组件的底层事实标准
HTML模板本身不解决跨框架问题，真正起作用的是 Web Components 三件套：Custom Elements、Shadow DOM 和 HTML Templates。Vue 或 React 里直接写 <user-card avatar="a.jpg" name="张三"> 能跑，靠的不是模板语法，而是浏览器原生支持的自定义元素注册机制。只要组件用 window.customElements.define() 注册过，任何框架渲染的 DOM 都能识别并激活它。
React 中处理自定义事件必须手动绑定
Vue 默认把 @click 映射到原生 click，但 Web Components 发出的事件（比如 user-select）不是冒泡型原生事件，React 的 JSX 无法自动监听。常见错误是直接写 onUserSelect={handle} 却没响应——React 不会把驼峰名转成 kebab-case 事件名。
- 正确做法是在
useEffect里用addEventListener手动挂载：ref.current.addEventListener('user-select', handler) - 别依赖
onXxx属性传函数，Web Components 不解析 JSX 属性值为函数 - 若用 Stencil 构建，优先启用其生成的 React wrapper（如
createReactComponent()），它已封装好事件代理逻辑
Shadow DOM 样式隔离在不同框架中表现一致
Shadow DOM 的样式封装能力不依赖框架，mode: 'open' 下所有框架都只能通过 ::part() 或 :host 影响内部样式。但容易踩坑的是：Vue 的 scoped CSS 或 React 的 CSS-in-JS 无法穿透 Shadow Root，所以别试图用 .user-card > img 去覆盖组件内图片样式。
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
- 组件作者需主动暴露可定制点：
static get styles() { return css`:host { --card-padding: 16px; }` } - 使用者改样式只能靠 CSS 变量：
<user-card style="--card-padding: 24px"> - 不要在父级 CSS 里写
user-card img { border-radius: 0 }——Shadow DOM 天然阻断此类选择器
构建时 polyfill 注入时机决定 IE 兼容性成败
IE11 不支持 Custom Elements v1 和 Shadow DOM，必须加载 custom-elements-es5-adapter.js 和 webcomponents-bundle.js。但顺序错了就白搭：adapter 必须在任何自定义元素定义前执行，且不能被模块打包器混淆。
立即学习“前端免费学习笔记（深入）”；
- CDN 引入要放在
<head>最顶部，早于所有 JS：<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.8.0/webcomponents-bundle.js"></script> - Webpack 项目中，不能把 polyfill 打进业务 bundle，得单独作为 entry 或用
html-webpack-plugin注入 script 标签 - Stencils 的
extras: { dynamicImportShim: true }会在运行时按需加载 polyfill，比全量引入更轻量
attributeChangedCallback，而 React 的 props 更新可能延迟一帧，导致首次渲染时属性值为空。这没法靠模板解决，得在组件内部用 observedAttributes + connectedCallback 做兜底初始化。 
