React 组件样式封装

Question

我正在尝试封装嵌入式组件的样式。该组件必须防止站点在没有脚本的情况下轻松覆盖样式。选择 Shadow Dom 的用途类似于Web Components。

然而，这会给 webpack 中的样式带来问题。所有样式都必须使用import 'style.css'从每个单独的组件导入而无需修改。

style-loader的insertInto选项旨在帮助解决此问题，但这只会引起更多问题。

...
        use: [
          {
            loader: 'style-loader',
            options: {
              insertInto: () => document.getElementById('host').shadowRoot
            },
          },
          {loader: 'css-loader'},
        ],
...

它产生错误：

未捕获的不变违规：目标容器不是 DOM 元素。

不确定该项目是否已加载我创建了文件来管理它（纯 javascript，因此 webpack 配置可以使用它）：

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getShadow = exports.getRoot = void 0;

var getShadow = function getShadow() {
  if (getShadow.root != null) {
    // Create the shadow root.
    var pageRoot = document.getElementById('host');
    pageRoot.attachShadow({
      mode: 'open'
    });
    getShadow.root = pageRoot.shadowRoot;
  }

  return getShadow.root;
};

exports.getShadow = getShadow;

var getRoot = function getRoot() {
  if (getRoot.react === null) {
    // Create div element for react to render into
    getRoot.react = document.createElement('div');
    getRoot.react.setAttribute('id', 'react-root'); // Append react root to shadow root.

    getShadow().appendChild(reactRoot);
  }

  return getRoot.react;
};

exports.getRoot = getRoot;

使用getShadowforinsertInto和getRootfor ReactDom.render。

这进一步产生：

addStyles.js:170 未捕获的错误：找不到样式目标。这可能意味着“insertInto”参数的值无效。

当尝试将 create shadow 逻辑纯粹移动到 webpack 配置中并且仅在创建 react 组件时查找它时，会出现新错误：

Semantic.min.css?6945:17 未捕获的 DOMException：无法在“元素”上执行“attachShadow”：无法在已经承载影子树的主机上创建影子根。在 ./node_modules/semantic-ui-css/semantic.min.css.options.insertInto

这是语义ui框架的问题吗？