Question

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

但是，这会在webpack中产生样式问题。必须使用import 'style.css'从每个单独的组件中导入所有样式，而无需进行修改。

style-loader的{{1}}选项旨在帮助您解决此问题，但这只是造成了更多问题。

insertInto

出现错误：

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

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

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

为"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 onetreeRoot = document.getElementById('host'); onetreeRoot.attachShadow({ mode: 'open' }); getShadow.root = onetreeRoot.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;使用getShadow，为insertInto使用getRoot。

进一步的收获：

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

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

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

语义UI框架有问题吗？

反应组件样式封装

0 个答案: