Реакция инкапсуляции в стиле компонентов - PullRequest
Новая
       25

Реакция инкапсуляции в стиле компонентов

2 голосов
/ 26 июня 2019

Я пытаюсь инкапсулировать стили для встроенного компонента. Компонент должен препятствовать тому, чтобы сайты легко переопределяли стиль без сценария. Shadow Dom был выбран для использования аналогично веб-компонентам .

Это, однако, создает проблемы со стилями в веб-пакете. Все стили должны быть импортированы с использованием 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 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 для ReactDom.render.

Это далее приводит к:

addStyles.js: 170 Uncaught Ошибка: не удалось найти цель стиля. Это, вероятно, означает, что значение параметра 'insertInto' недопустимо.

При попытке переместить логику создания тени исключительно в конфигурацию веб-пакета и искать ее только при создании реагирующих компонентов, возникает новая ошибка:

semantic.min.css? 6945: 17 Uncaught DOMException: Не удалось выполнить 'attachShadow' для 'Element': Теневой корень не может быть создан на хосте, на котором уже размещено теневое дерево. at ./node_modules/semantic-ui-css/semantic.min.css.options.insertInto

Это проблема с семантическим фреймворком?

...