Less编译的CSS在Shadow DOM中失效，根本原因是外部样式无法进入其独立CSSOM；必须将编译后的完整CSS字符串主动注入shadowRoot的<style>节点，并确保JIT扫描覆盖模板、动态类名加入safelist、CSS变量显式透传。
Less 生成的 CSS 在 Shadow DOM 中失效，不是 Less 编译错了，也不是类名写漏了，而是编译产物仍属于“外部样式”，根本进不了 Shadow DOM 的样式作用域——浏览器压根不拿它去匹配 shadowRoot 内的元素。
为什么 @import / link / 全局 style 标签全无效
Shadow DOM 构建独立 CSSOM，@import、<link rel="stylesheet">、甚至 document.head 里的 <style> 都不会被读取。你看到的“样式存在但没效果”，本质是规则根本没参与匹配过程。Less 编译出的 CSS 文件哪怕内容完全正确，只要没手动放进 shadowRoot，就等于不存在。
为什么直接在 shadowRoot.innerHTML 里写 <style> 也不行
常见错误是这样写：
element.attachShadow({ mode: 'open' });
element.shadowRoot.innerHTML = `
<style>
.btn { color: blue; }
</style>
<button class="btn">Click</button>
`;问题在于：如果 .btn 是 Less 编译出来的原子类（比如 .p-4、.text-sm），而这些类名根本没出现在这段内联 <style> 里，那它照样不生效。更糟的是，若你真把整份 tailwind.css 字符串拼进去，但 Less 编译时没启用 content 扫描或漏了 safelist，生成的 CSS 里压根没有那个类——注入的只是空规则。
立即学习“前端免费学习笔记（深入）”；
-
Less输出的 CSS 必须是最终可运行的字符串，不能含@import或相对路径引用 - 若用
Less管理 Tailwind 类，必须确保 JIT 模式已扫描到所有模板路径（如'./src/**/*.ts'） - 动态拼接类名（
class="${cls}"）必须显式加进safelist，否则Less+ Tailwind 插件会直接删掉这条规则
如何让 Less 编译结果真正生效
核心只有一条：把 Less 编译后的完整 CSS 字符串，作为纯文本注入 shadowRoot 的 <style> 节点。不能靠构建时自动挂载，必须 JS 主动执行。
- 推荐方式：用构建工具把
Less输出转成字符串模块（Vite 用?raw，Webpack 用raw-loader），再shadowRoot.appendChild(style) - fallback 方式：运行时
fetch('/compiled.css').then(r => r.text())，但路径必须是 public 下可访问的构建产物，不是源码路径 - 务必检查
shadowRoot.mode === 'open'，mode: 'closed'会导致shadowRoot为null，注入静默失败 - 加防重复标记：
if (!shadowRoot.querySelector('style[data-less-injected]')) { /* 注入 */ }，避免多次挂载导致权重混乱
最容易被忽略的两个硬性前提
注入动作本身不解决任何问题——它只是最后一步。真正卡住的往往是前置条件：
-
Less编译流程是否覆盖了 Shadow DOM 模板？比如 Lit 的html`<div class="${cls}">`必须出现在content配置里，否则 JIT 不生成对应类 - CSS 变量（
var(--color)）在 Shadow DOM 中默认不继承，得靠:host { --color: var(--color); }显式透传，否则即使Less里写了color: var(--color)，结果也是initial
