LayoutWorklet是CSS Houdini中仅Chromium支持的底层布局API，需运行时检测、同源模块注册，类须声明inputProperties并实现纯函数式layout()，禁用DOM访问与非确定性操作。
LayoutWorklet 是 CSS Houdini 中最底层、最实验性的能力之一，它允许你真正介入浏览器的布局计算阶段，用 JavaScript 定义子元素如何测量、定位和排列。但它不是“增强现有布局”，而是绕过传统盒模型逻辑，提供一套全新、受约束的布局建模方式。它适合探索性项目、内部工具或 Chrome/Edge 专属后台系统，不能用于需要兼容 Firefox 或 Safari 的生产环境。
确认支持与安全注册
LayoutWorklet 目前仅 Chromium 内核浏览器（Chrome ≥ 89、Edge ≥ 89、Opera）原生支持，Firefox 和 Safari 明确不支持，且无法通过 polyfill 补齐。使用前必须做运行时检测：
- 用 'layoutWorklet' in CSS 判断 API 可用性，避免脚本报错
- CSS.layoutWorklet.addModule() 必须在主线程调用，路径需为同源 URL（不能是 data:、blob: 或跨域地址）
- 模块只能注册一次；重复调用同一 URL 不报错但不重载，建议加 .catch() 捕获加载失败（如 404、CORS）
编写合规的布局类
模块脚本中必须调用 registerLayout(name, class)，且该语句必须出现在顶层作用域（不能包裹在 if、函数或异步回调中）。类定义需满足硬性约束：
- 必须声明 static get inputProperties()，只接受 CSS 自定义属性（如 --gap、--columns），不支持 width/display 等原生属性
- 必须实现 layout() 方法，否则运行时报错 "layout method is not implemented"
- 禁止在 layout() 中读取 DOM、调用 getComputedStyle()、访问 window/document —— worklet 运行在独立线程，无 DOM 上下文
- 不可使用 Math.random() 或任何非确定性逻辑，否则导致布局结果不稳定，破坏浏览器缓存与渲染一致性
在 CSS 中启用并传参
布局类注册成功后，即可在 CSS 中通过 display: layout(<name>) 启用。参数通过自定义属性传递，例如：
.masonry-grid {
display: layout(masonry);
--columns: 3;
--gap: 12px;
}
注意：display: layout(...) 会完全替代原有 display 行为（如 block/flex），其子元素不再参与正常流排版，所有尺寸与位置均由 layout() 函数返回的 child.setBounds() 控制。
关键数据安全边界
layout() 函数能可靠访问的数据非常有限，务必只依赖传入参数：
- constraints.fixedInlineSize：容器可用行内尺寸（即宽度），可直接用于列宽计算
- styleMap.get('--prop')：获取已声明的自定义属性值，需手动解析（如 parseInt(val.value)）
- children：LayoutChild 对象数组，可调用 child.intrinsicSize 获取固有高度，或 child.layoutNextFragment() 获取分片尺寸（用于长内容）
- 禁止访问 offsetHeight、clientWidth、computedStyle、scrollHeight 等同步布局信息
典型错误与规避示例
以下写法看似直观，但全部违反 LayoutWorklet 规则：
- ❌ const w = el.offsetWidth → 无 DOM，不可读
- ❌ const r = Math.random() → 非确定性，禁用
- ❌ el.style.left = '100px' → 不能操作 DOM 属性
- ❌ if (window.innerWidth > 768) → 无 window 对象
- ✅ 正确做法：所有逻辑基于 constraints、styleMap、children 输入，纯函数式推导位置与尺寸
