WebAssembly 无法直接处理 CSS，所有样式操作必须由 JavaScript 完成；Wasm 仅负责计算，JS 负责 DOM 渲染与样式注入，二者需严格分工并同步生命周期。
WebAssembly 本身不处理 CSS，所有样式引入和操作都必须由宿主环境（即 JavaScript + HTML）完成。Wasm 模块无法直接读取、注入或修改 <style> 或 <link>，也不能访问 document 或 shadowRoot —— 它连 DOM API 都没有。
Wasm 模块里根本不能 import 或操作 CSS
这是最常被误解的一点：Wasm 是纯计算模块，没有内置的样式系统、无 DOM、无 CSSOM。你写 @import、fetch('./style.css') 或 document.createElement('style')，这些代码如果放在 C/C++ 里编译进 Wasm，**编译会失败或运行时报 undefined symbol 错误**。
-
fopen("style.css", "r")在 Emscripten 中只能读取预加载到虚拟文件系统的资源，不是网络 CSS 文件 -
EM_ASM{ document... }可以桥接 JS，但属于“胶水代码绕过”，不是 Wasm 原生能力，且不可用于 Shadow DOM 样式注入 - 试图在 C 里调用
adoptedStyleSheets？该属性是 JS 的ShadowRoot实例属性，Wasm 无法构造或赋值
真正可行的样式集成路径只有 JS 层控制
所有外部 CSS 的加载、作用域隔离、动态更新，都必须在 JS 初始化阶段或组件生命周期中完成。Wasm 模块只负责“算”，JS 负责“展”。典型分工如下：
- Wasm 导出函数如
_processImageData，返回处理后的像素数组或结构体指针 - JS 接收结果，用
CanvasRenderingContext2D绘制，或生成<div class="result"> - 样式通过
<link rel="stylesheet">（全局）或adoptedStyleSheets（Shadow DOM）注入，与 Wasm 无关 - 若需根据 Wasm 计算结果切换样式类，JS 用
element.classList.toggle()，而非让 Wasm 操作 classList
在 Web Components + Wasm 场景下避免 @import 和内联 style
当你的自定义元素内部用 Wasm 做渲染/计算，并希望样式隔离时，@import 在 shadowRoot.innerHTML 中写死 CSS 路径是高危操作——它会阻塞首屏、404 静默丢弃、构建工具无法分析，且 Safari 旧版本对 adoptedStyleSheets 支持不全。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确做法：JS 构造
CSSStyleSheet实例，replaceSync()注入规则，再赋给shadowRoot.adoptedStyleSheets - ⚠️ 降级逻辑必须显式判断：
'adoptedStyleSheets' in shadowRoot为 false 时，才用fetch('./style.css').then(r => r.text()).then(css => { ... })+ 守卫式querySelector('style[data-id="my-comp"]') - ❌ 禁止在 JS 胶水代码里写
shadowRoot.innerHTML = '<style>@import "./style.css"</style>'—— 这等于把已知缺陷又手动复现一遍
复杂点在于：Wasm 不提供样式抽象层，所有样式决策必须提前在 JS 设计好；容易被忽略的是，Wasm 模块加载时机（Module().then）和样式注入时机（connectedCallback）不同步，若 JS 在 Wasm 初始化完成前就尝试基于其输出操作 DOM 类名，可能读到未定义值。
