将CSS样式注入阴影根目录

Question

我在preact项目中创建一个Shadow DOM，然后将样式元素注入Shadow根，如下所示：

import style from "./layout/main.css";

loader(window, defaultConfig, window.document.currentScript, (el, config) =>
{
    const shadowHost = document.querySelector('#widget-_hw');
    shadowHost?.attachShadow({ mode: 'open' });
    const shadowRoot = document.querySelector('#widget-_hw')?.shadowRoot
    const renderIn = document.createElement('div');
    const styleTag = document.createElement('style');
    styleTag.innerHTML = style;
    shadowRoot?.appendChild(styleTag); 
    renderIn.setAttribute('id', 'render-div');
    shadowRoot?.appendChild(renderIn);
    render(h(App, { ...config, element: el }), renderIn)
}
);

当我做console.log (样式)时，我得到了所有的CSS类，如下图所示，但是当我打印阴影根目录的console.log时

样式元素如下所示：

<Style>[object object]<Style>

您可以看到屏幕截图，以进一步参考。

我Webpack的配置是这样的：

​

​

module: {
      rules: [
        // packs SVG's discovered in url() into bundle
        { test: /\.svg/, use: 'svg-url-loader' },
        {
          test: /\.css$/i,
          use: [
            {
              loader: 'style-loader',
              options: { injectType: 'singletonStyleTag' }
            },
            {
              // allows import CSS as modules
              loader: 'css-loader',
              options: {
                modules: {
                  // css class names format
                  localIdentName: '[name]-[local]-[hash:base64:5]'
                },
                sourceMap: isDevBuild
              }
            }
          ]
        },

有人能帮我找到解决这个问题的办法吗？

Answer 1

解决办法是:在webpack中完全拆下装载机。