Легкий стиль DOM просачивается в мой веб-компонент - PullRequest
Новая
       35

Легкий стиль DOM просачивается в мой веб-компонент

0 голосов
/ 26 марта 2020

Я работаю над веб-компонентом, разработанным с помощью React. Все шло хорошо, пока я не включил этот веб-компонент для работы на веб-сайте. bootstrap этого веб-сайта меняет стили моего веб-компонента. Я уже пробовал:

1 - добавить all: initial, но это не имело значения - Стиль Light DOM просачивается в Shadow DOM

2 - пространство имен Bootstrap css. Это решило некоторые проблемы, но не все - Как создать пространство имен Twitter Bootstrap, чтобы стили не конфликтовали | https://www.youtube.com/watch?v=f4fikVsxbzw

3 - используйте пакет classnames. В этом случае проблема была противоположной, теневой DOM испортил легкий DOM - https://www.npmjs.com/package/classnames

Мне интересно, проблема в том, как я создаю веб-компонент, вот код: 

import React from 'react';
import ReactDOM from 'react-dom';
import retargetEvents from 'react-shadow-dom-retarget-events';
import {Provider} from 'react-redux';

import SequenceSearch from 'containers/SequenceSearch/index.jsx';
import configureStore from 'store/configureStore.js';

import bootstrap from 'styles/bootstrap.css';
import sequenceSearchStyles from 'styles/sequence-search.scss';

// Prepare data
export const store = configureStore();


class RNAcentralSequenceSearch extends HTMLElement {
  constructor() {
    super();

    // prepare DOM and shadow DOM
    const shadowRoot = this.attachShadow({mode: 'open'});
    const mountPoint = document.createElement('html');
    shadowRoot.appendChild(mountPoint);

    // parse arguments
    const databases = JSON.parse(this.attributes.databases.nodeValue);

    // render React
    ReactDOM.render([
      <style key={bootstrap} dangerouslySetInnerHTML={{__html: bootstrap}}/>,
      <style key={sequenceSearchStyles} dangerouslySetInnerHTML={{__html: sequenceSearchStyles}}/>,
      <body key='body'>
        <Provider key='provider' store={store}>
          <SequenceSearch databases={databases}/>
        </Provider>
      </body>
      ],
      mountPoint
    );

    // retarget React events to work with shadow DOM
    retargetEvents(shadowRoot);
  }

  connectedCallback() {
  }

  disconnectedCallback() {
    let state = store.getState();
    if (state.statusTimeout) {
      clearTimeout(state.statusTimeout);
    }
  }
}

customElements.define('rnacentral-sequence-search', RNAcentralSequenceSearch);

Кто-нибудь знает, как это решить? Спасибо!

...