Shadow DOM中属性映射不会自动发生，必须手动在attributeChangedCallback中同步；需声明observedAttributes，注意字符串类型与布尔属性判空，避免setAttribute引发死循环，且不适用于slot内容或反射DOM节点属性。
Shadow DOM里属性映射不是自动发生的
自定义元素的HTML属性不会自动变成内部Shadow DOM节点的属性——比如你在<my-input value="hello">上写的value，Shadow内<input>并不会自动获得value="hello"。这是最常被误以为“应该有”的功能，但浏览器不做任何隐式映射。
- 属性映射必须手动实现：监听
attributeChangedCallback，解析变更，再显式赋值给内部节点 - 只对
observedAttributes中声明的属性生效；漏写就收不到变更通知 - 注意字符串与类型转换：HTML属性全是字符串，
<my-toggle disabled>传进来的是"disabled"而非true，需手动判断 - 初始属性在
connectedCallback里也要手动同步一次——因为首次渲染时attributeChangedCallback可能还没触发
如何安全地把宿主属性同步到内部<input>
典型场景是封装表单控件，需要把value、disabled、placeholder等透传到底层原生<input>。关键不是“复制”，而是建立单向数据流：
- 在
observedAttributes里明确列出要响应的属性：['value', 'disabled', 'placeholder'] -
attributeChangedCallback(attr, oldVal, newVal)中，用switch分发处理：case 'value': this._input.value = newVal; break; - 对布尔属性如
disabled，检查是否为null（表示移除）或存在（表示启用），而不是比较字符串值 - 避免直接操作
this._input.setAttribute()——它会再次触发attributeChangedCallback，造成死循环；改用.value、.disabled等属性赋值
为什么reflect不适用于Shadow DOM内部节点
很多人想用Reflect.defineProperty或Object.defineProperty把宿主属性“反射”到内部DOM节点上，这条路走不通：
-
Reflect.defineProperty只能作用于JS对象，不能修改原生DOM节点的属性行为（如input.value的getter/setter是不可重写的） - 试图覆盖
HTMLElement.prototype.setAttribute会影响全局，且无法区分是宿主调用还是内部节点调用 - Shadow DOM内部节点的属性绑定由浏览器控制，自定义逻辑只能做“后置同步”，不能劫持底层机制
- 真正可控的入口只有
attributeChangedCallback+ 手动赋值，别绕弯子
容易忽略的边界情况：动态属性和slot内容
属性映射规则只对宿主元素自身的HTML属性有效，对插槽（<slot>）里的内容完全无效——你不能靠设置<my-card><p slot="title">Hi</p></my-card>然后期望p自动继承my-card的data-theme。
立即学习“前端免费学习笔记（深入）”；
-
::slotted(p)只能控制样式，不能映射属性；想让插槽内容响应主题，得靠CSS变量+var(--theme)，不是属性传递 - 如果需要把宿主属性“注入”到插槽内容中，必须在
slotchange事件里遍历assignedNodes()，手动setAttribute()——但要注意这会破坏使用者对插槽节点的控制权 - 动态添加的属性（比如运行时
el.setAttribute('mode', 'edit')）同样走attributeChangedCallback流程，无需额外处理，前提是已在observedAttributes中声明
value属性变化应立刻反映到输入框，但用户手动输入后，是否要反向更新宿主value属性？这属于受控/非受控组件的设计决策，不是Shadow DOM能替你决定的。 
