HTML自定义元素并非开箱即用，需手动适配：React需useRef+useEffect赋值及addEventListener；Vue需v-bind/v-on显式桥接且注意slot与驼峰属性映射；Angular须启用CUSTOM_ELEMENTS_SCHEMA；Shadow DOM进一步增加ref访问、样式穿透与事件处理复杂度。
HTML自定义元素本身不自动与任何前端框架（React、Vue、Angular等）互通；要让<my-button>在框架里正常渲染、响应 props 和事件，必须手动桥接——不是“开箱即用”，而是“按需适配”。
customElements.define 之后，框架能直接识别吗？
不能。React/Vue 默认把未知标签（如<my-input>）当普通 HTML 元素处理：属性不会响应式更新，事件监听需手动绑定，生命周期也不受框架控制。
- React 中写
<my-input value={val} onInput={handler}>，value不会同步到元素内部，onInput也不会自动转成原生input事件监听 - Vue 中用
<my-toggle v-model="checked">，v-model失效，因为框架不认识my-toggle的属性/事件契约 - Angular 需显式启用
CUSTOM_ELEMENTS_SCHEMA，否则模板编译报错‘my-card’ is not a known element
怎么让 React 正确传 props 并监听事件？
靠 ref + 手动赋值 + addEventListener。React 不会把 JSX 属性映射到自定义元素的 property，必须自己接管。
- 用
useRef()拿到元素实例，再在useEffect里赋值：ref.current.value = props.value - 事件不能用
onInput，得用ref.current.addEventListener('input', handler) - 注意：字符串属性（如
disabled）会变成 attribute，但布尔属性需显式设为 property：ref.current.disabled = true，否则无效 - 推荐封装一个 Hook，比如
useCustomElement(ref, { value, disabled }, { input: handler })，避免重复逻辑
Vue 里如何支持 v-model 和 slot？
Vue 3 的 defineCustomElement 是官方方案，但仅限 Vue 自己打包的自定义元素；若用原生 customElements.define，就得靠 v-bind + v-on 显式桥接。
立即学习“前端免费学习笔记（深入）”；
-
v-model需拆成:value="model" @input="e => model = e.target.value"，且确保元素有valueproperty 和inputevent - slot 内容会被 Vue 当作静态 DOM 插入，但自定义元素若用 Shadow DOM，默认不透传 slot —— 必须在元素内部显式写
<slot></slot> - 属性名驼峰（如
maxLength）会被 Vue 转成 kebab-case（max-length），而自定义元素通常只响应 property，所以建议统一用 kebab-case 属性名（max-length）并同步映射到 property
为什么 Shadow DOM 会让框架交互更复杂？
Shadow DOM 隔离了样式和 DOM 查询，框架的 ref、querySelector、CSS 选择器默认查不到影子树内部节点。
- React/Vue 的 ref 指向的是 light DOM 中的自定义元素标签，不是其 Shadow Root —— 想操作内部按钮？得手动调
ref.current.shadowRoot.querySelector('button') - 框架的 CSS Scoped 样式（如 Vue 的
<style scoped>）无法穿透到 Shadow DOM，必须用::part()或:host主动暴露接口 - 如果元素内部用了
attachShadow({ mode: 'closed' })，连shadowRoot都拿不到，框架彻底失去干预能力 —— 生产环境慎用closed
真正麻烦的不是定义元素，而是让框架“理解”它：每个框架对 property 同步、事件冒泡、slot 分发、响应式更新的处理逻辑都不同，没有银弹。最稳的做法是——先确认你的自定义元素是否真的需要被框架驱动；如果只是复用 UI 结构，纯 HTML + 原生 JS 可能更轻、更可控。
