记录一下 Shadow DOM 相关的疑难杂症和解决方案

[festoney8]

随手记录一下折腾的结果，可能有误

1. Shadow DOM 内的 style HMR

• 直接参考插件文档，原生支持 HMR

vite-plugin-monkey/README.md

Lines 145 to 163 in d24eaa3

	/**
	* handle CSS imports as style nodes([HTMLStyleElement](https://developer.mozilla.org/docs/Web/API/HTMLStyleElement))
	*
	* If you use [Shadow DOM](https://developer.mozilla.org/docs/Web/API/Web_components/Using_shadow_DOM) (style isolation) to place your interface application, this is very useful.
	*
	* Support `.css?style`, `.less?style`, `.sass?style`, `.scss?style`, `.styl?style`, `.stylus?style`, `.pcss?style`, `.postcss?style` and `.sss?style` imports
	*
	* add `/// <reference types="vite-plugin-monkey/style" />` to vite-env.d.ts for type hint
	*
	* @example
	* import style1 from './style1.css?style':
	* import style2 from 'normalize.css?style';
	* const container = document.createElement('div').attachShadow({ mode: 'open' });
	* container.append(style1, style2); // with hmr when change style1.css
	* const style3 = style1.cloneNode(true); // it will still have hmr
	*
	* @default
	* true
	*/

2. Shadow DOM 内使用 Tailwind CSS v4

问题

Tailwind CSS V4 会默认把很多 CSS 变量挂在 :root 上，在 Shadow DOM 内部分 UI 畸形（比如阴影、按钮、边框），F12 可以发现部分样式找不到变量

方案一

使用 vite 插件 https://github.com/Alletkla/vite-plugin-tailwind-shadowdom 把 :root 上的变量改到 :host 上

方案二

参考 tailwindlabs/tailwindcss#15005 (comment) ，在入口 style.css 文件中手动贴上几十条样式

3. Shadow DOM 内使用 daisyUI

daisyUI 和 tailwindcss 一样会在 :root 上挂很多变量

但它比 tailwindcss 多提供了一个功能，可以自定义用于挂载变量的 root 节点，改成 :host 即可

参考：https://daisyui.com/docs/config/#root

4. 在网页内 1rem != 16px 时，Shadow DOM 内 tailwindcss 的 rem 问题

最常见的页面是 B 站直播间 https://live.bilibili.com/ 官方样式指定了

html {
    font-size: 12px;
}

对 1rem=16px 的 tailwindcss 写出来的 UI 影响较大

解决方案

用 postcss 插件或 vite 插件在打包时直接将 tailwindcss 中的 rem 按照 1rem=16px 替换成 px

postcss 插件：https://github.com/TheDutchCoder/postcss-rem-to-px
vite 插件：还没找到

vite 原生支持 postcss，可以直接在 vite config 中编写 postcss 配置（或指定 postcss.config.js 的路径）

遗留问题

目前 vite postcss 好像只在 build 阶段生效，dev mode 下还是要忍受一下 rem 数值问题

5. Shadow DOM 内 vue 组件的 style 收集问题

vue style 会默认注入到 document.head 内，对 shadow dom 内的元素不生效

插件提供 cssSideEffects 可以在 build 阶段收集 css，但由于在 Shadow DOM 内，这个 css 无法通过 GM_addStyle 注入。

这种情况可以在 cssSideEffects 中把 css 挂到 globalThis 下的某个值上，比如 globalThis.__MONKEY_STYLE__，在 main.ts 中从这个值取 css，注入到 Shadow DOM 内
不过只支持 build 阶段，dev 模式估计没戏，还是尽量用 tailwindcss 吧