element.attributestylemap 是 typed om 的可变入口，提供类型安全的样式操作；它返回 stylepropertymap 对象，需用 set() 或 append() 修改，支持 cssunitvalue 等类型值，不支持驼峰命名和自定义属性。
element.attributeStyleMap 是 Typed OM 的入口
直接读写 element.style 本质是字符串操作，容易出错；Typed OM 提供了 attributeStyleMap 这个只读的 StylePropertyMapReadOnly 对象，它是真正类型安全的操作起点。它不响应 style 属性的字符串变更，只反映通过 Typed OM 设置或解析出的样式值。
注意：attributeStyleMap 本身不可写，要修改样式必须用 element.attributeStyleMap.set() 或 element.computedStyleMap() 配合计算逻辑 —— 后者返回只读映射，前者才是可变入口。
-
element.style返回字符串（如"20px"），element.attributeStyleMap.get('font-size')返回CSSUnitValue对象，含.value和.unit字段 - 仅支持标准 CSS 属性名（kebab-case），比如
'font-size'、'background-color'，不接受驼峰（fontSize会静默失败） - 若元素没有内联
style属性，attributeStyleMap仍存在但为空；设置后会自动创建并同步到style属性中
set() 和 append() 的区别：覆盖 vs 累加
对同一个属性多次调用 set() 会覆盖前值；而 append() 允许一个属性有多个值（如 transform 多个函数、background 多层渐变），浏览器按顺序应用。
常见误用：用 set('transform', 'translateX(10px)') 后再 set('transform', 'rotate(45deg)')，结果只有旋转生效 —— 因为被完全替换了。
- 想叠加变换？改用
element.attributeStyleMap.append('transform', new CSSTransformValue([new CSSTranslate(...), new CSSRotate(...)])) -
set()接收CSSUnitValue、CSSKeywordValue、CSSUnparsedValue等类型，传字符串会自动转为CSSUnparsedValue，失去类型校验 - 安全写法示例：
element.attributeStyleMap.set('opacity', CSS.number(0.7))，比set('opacity', '0.7')更可靠
computedStyleMap() 不等于 attributeStyleMap
computedStyleMap() 返回的是当前计算后的所有样式（含继承、层叠、媒体查询匹配结果），而 attributeStyleMap 只管内联 style 属性本身。两者用途完全不同，别混用。
典型陷阱：想“读取当前 font-size 值做运算”，直接 computedStyleMap().get('font-size') 拿到的是 CSSPixelValue，但若后续要用它参与动画或缩放，得确认单位是否一致（比如父级用 rem，这里却返回 px）。
-
computedStyleMap()的值不可写，只能读；attributeStyleMap才是唯一可写入内联样式的 Typed OM 接口 - 读取
computedStyleMap()中的width或height时，可能返回CSSAutoValue（对应auto），需先判空再取.value - 动画场景下，优先用
computedStyleMap()获取起始值，用attributeStyleMap.set()更新目标值，避免字符串拼接导致的精度丢失
Typed OM 在 Shadow DOM 中的行为差异
在自定义元素的 Shadow DOM 中，attributeStyleMap 依然只作用于该元素自身的 style 属性，但 computedStyleMap() 会包含 Shadow 样式表的影响 —— 这点和 Light DOM 一致。不过，CSS 自定义属性（--my-color）无法通过 attributeStyleMap 直接 set，必须用 element.style.setProperty('--my-color', 'blue')。
- 想批量更新多个 CSS 变量？仍得走传统
setProperty()，Typed OM 目前不支持自定义属性的类型化操作 - Shadow DOM 中的
attributeStyleMap修改会触发样式重计算，但不会导致整个 Shadow 树重排 —— 只影响该元素自身盒模型相关属性 - 调试时可用
console.log([...element.attributeStyleMap])查看当前已设置的键值对，比element.style.cssText更结构化
Typed OM 的核心价值不在“多了一种写法”，而在把 CSS 值从字符串牢笼里解放出来：单位可验、运算可链、错误可抛。但它的边界也很清晰 —— 不处理自定义属性、不替代层叠逻辑、不自动同步外部样式表。用错地方，反而比 style.fontSize = '16px' 更难 debug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
