Styles not being properly imported when using shadow DOM

[patricknelson]

trafficstars

This is currently low priority for me personally (since I do not use the shadow DOM), but welcome a PR to fix this if anyone is interested and has the time. The only reason I think it's still worthwhile to consider supporting shadow DOM is because it brings some important svelte-retag specific features to existing capability in Svelte, i.e.

1. Vite HMR compatibility
2. Composability (i.e. easily use normally internally within Svelte + the ability to define custom elements as needed)

🤔 FWIW, it appears that this affects the original fork svelte-tag as well. Anyway, see below.

---

Describe the bug

Styles from the component itself work fine in light DOM, but when using shadow DOM (at least in development mode) the CSS styles from the component do not appear to be injected at all into the component.

Reproduction

JavaScript

import svelteRetag from 'svelte-retag';
import HelloWorld from './HelloWorld.svelte';

svelteRetag({ component: HelloWorld, tagname: 'hello-world', shadow: true });

HTML

<hello-world></hello-world>

Svelte component

<div>Hello world</div>


<style>
	div {
		border: 1px dotted red;
	}
</style>

Logs

No response

System Info

System:
    OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (16) x64 Intel(R) Core(TM) i7-10875H CPU @ 2.30GHz
    Memory: 2.26 GB / 5.79 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.14.2/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 111.0.5563.146
  npmPackages:
    svelte: ^3.57.0 => 3.58.0
    svelte-retag: ^0.0.3 => 0.0.7

Severity

annoyance

[patricknelson]

Note: This may actually only affect IIFE-based execution which embeds styles in the JS and then tries to attach them to the main document. If compiling using the typical modules, you can still pass the generated CSS as an argument to the href property in setup.

[patricknelson]

Probably related to https://github.com/vitejs/vite/issues/11769. Maybe just specific to compiling to umd or iife in Vite, causing the styles to be injected on the host page instead of making them available in the shadow DOM.

[patricknelson]

Reverting title again, since there are actually multiple use cases for this (i.e. missing styles when using the shadow DOM):

1. IIFE/UMD: As noted above, styles are always only ever attached to the root document
2. Dev mode: When in dev mode (which always uses modules), it's not practical to reference a built CSS. However, <style> tags for each component are still attached individually to the root document dynamically by Vite (available with a special data-vite-dev-id attribute).

This issue could be an opportunity to approach resolving both at the same time. Uncovered when validating both light + shadow DOM fixes for issue #10. Some ideas on resolving:

1. IIFE/UMD:
   • Maybe build and then require some kind of preprocessor plugin? No idea yet. The style cloning approach below (for dev mode) could work, however it seems far too crude for production.
2. Dev mode:
   • Augment the API to allow user to also opt into dynamically cloning <style data-vite-dev-id> tags on the document and also appending them to shadowRoot's. Possibly hacky, but might work since it appears that (at least with the default configuration), styles are still scoped even within the shadow DOM, so conflicts may not arise (but could).
   • Also utilize a preprocessor of some sort to redirect styles to some kind of scope that svelte-retag has access to and can redirect appropriately?

[king-bcolor]

再次恢复标题，因为实际上有多个用例（即使用影子 DOM 时缺少样式）：

1. **IIFE/UMD：**如上所述，样式始终只附加到根文档
2. **开发模式：**在开发模式下（始终使用模块），引用已构建的 CSS 并不实用。但是，<style>每个组件的标签仍由 Vite 动态地单独附加到根文档（可通过特殊data-vite-dev-id属性获得）。

这个问题可能是同时解决这两个问题的机会。在验证问题#10 的light + shadow DOM 修复时发现的。一些解决方法：

1. IIFE/UMD：

   • 也许构建然后需要某种预处理器插件？目前还不知道。下面的样式克隆方法（用于开发模式）_可以_工作，但它似乎对于生产来说太粗糙了。

2. 开发模式：

   • 增强 API，让用户还可以选择动态克隆<style data-vite-dev-id>文档中的标签并将其附加到shadowRoot。可能有点不靠谱，但可能会有效，因为看起来（至少在默认配置下），样式仍然在 shadow DOM 中，因此_可能_不会发生冲突（但可能会发生）。
   • 还利用某种预处理器将样式重定向到 svelte-retag 可以访问并可以适当重定向的某种范围？

same problem. I am developing a browser extension that creates a shadow DOM in the content script, but Vite + Tailwind + svelte also fails to hot-reload.