inputProperties必须显式声明，否则CSS变量不会传入paint()；需用static get inputProperties()返回带--前缀的字符串数组，读取时用.value并按类型转换，仅Chrome/Edge支持。
inputProperties 必须显式声明，否则 CSS 变量根本不会传进来
浏览器不会自动把所有 --* 自定义属性塞进 paint() 的 properties 参数里。你得在类上用 static get inputProperties() 明确列出要监听的变量名，一个都不能少，拼写、大小写、连字符都得严丝合缝。
-
inputProperties返回的是字符串数组，比如['--dot-size', '--bg-color']，不是对象也不是 Map - 没列进去的变量，
properties.get('--missing-var')会返回undefined，不会报错，但后续读取.value就崩了 - 变量名必须带双横线前缀，写成
'dot-size'或'--dotSize'都无效 - 支持 CSS 属性别名（如
--fg和--foreground同时声明），但每个都得单独列
读取变量值要用 .value，别直接当字符串用
properties.get() 返回的不是原始值，而是一个 CSSStyleValue 实例（比如 CSSUnitValue 或 CSSKeywordValue），直接赋给 ctx.fillStyle 或做数学运算会出错。
- 数字类变量（如尺寸、间距）得先取
.value再parseFloat()，例如：const size = parseFloat(props.get('--dot-size').value) || 8 - 颜色类变量尽量转成
rgb(r,g,b)格式再赋给fillStyle，#abc、hsl()等可能解析失败 - 布尔或开关类变量（如
--enabled: true）得用.toString() === 'true'判断，不能靠真值转换
inputProperties 不监听变化，只是“开门”——触发重绘靠属性变更
声明 inputProperties 只是告诉浏览器：“这些变量我关心”，但它本身不监听、不订阅、不绑定。真正触发 paint() 重入的，是 DOM 元素上对应 CSS 自定义属性的值发生变更。
- 改
style="--dot-size: 12px"→ 触发重绘；改className但没动变量 → 不触发 - 用
requestAnimationFrame动态更新变量是常见做法，例如：el.style.setProperty('--offset', t % 100) - 别指望 CSS 动画（
@keyframes）驱动 worklet，它对inputProperties无感知 - 变量值不变（哪怕重新 set 一遍相同值），
paint()也不会调用——浏览器做了浅比较优化
容易被忽略的兼容细节：Firefox/Safari 当前完全不支持
截至 2026 年 5 月，inputProperties 仅在 Chrome/Edge ≥ 88 有效。Firefox 和 Safari 仍无实现计划，DevTools 里启用 “Paint flashing” 也看不到任何绘制区域。
- 服务端需确保 worklet JS 文件返回
Content-Type: text/javascript，Firefox 会静默拒绝非此类型的响应 - 本地开发别用
file://协议，必须走http://或https://（可用python3 -m http.server快速起服务） - 重复注册同一名字的 worklet 不报错，但后一次覆盖前一次——如果两次声明的
inputProperties不一致，行为会悄无声息地变
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
