我希望他们混在一起 . 更具体地说，小部件使用Semantic-UI组件，而某些主机页面使用bootstrap .

我发现了Shadow Dom并根据我的理解它应该避免使用css leaking out from my component and vice-versa

Scoped CSS：在shadow DOM中定义的CSS是作用域的 . 样式规则不会泄漏，页面样式也不会流失 .

太好了，似乎这正是我想要的 .

那么我已经将我的React根函数改为这样的：

import React from 'react';
import {render} from 'react-dom';
import {Provider} from 'react-redux';
import {Store} from 'react-chrome-redux';

import AppContainer from './components/AppContainer';
import Toolbar from './components/Toolbar';

const proxyStore = new Store({portName: 'my-extension'});

const anchor = document.createElement('div');
anchor.id = 'my-extension-anchor';
const shadowRoot = anchor.attachShadow({mode: 'open'})

const semanticUrl = chrome.runtime.getURL("styles/semantic.min.css")

document.body.appendChild(anchor)

render(
  <Provider store={proxyStore}>
      <div>
          <link id='semantic-ui' rel='stylesheet' type='text/css' href={semanticUrl} media='all' />
          <AppContainer>
              <Toolbar />
          </AppContainer>
      </div>
  </Provider>
  , shadowRoot);

我注意到的第一件事是我的小部件没有得到正确的字体 . 在一些谷歌之后，我发现this post解释我要从semantic-ui文件中取出我的font-faces并将其注入主机的头部 . 现在它似乎工作，但它仍然听起来像一个廉价的解决方案 .

无论如何，即使在这个改变之后它没有按照我的预期工作，我的小部件中的CSS也不再泄漏......但是我的小部件正受到当前页面样式表的影响 . 我尝试过其他一些修改：

  • 使用模式关闭而不是打开

  • 使用一些React库，即：ReactShadow

当我检查我的元素时，我可以看到它正在使用主页中的一些样式表，显示如下内容：

继承自div＃my-extension-anchor body {bootstrap.min ....

我的小部件应该是“无引导” .

我误解了Shadow DOM的工作原理吗？有办法实现我想要的吗？

javascript css reactjs google-chrome-extension shadow-dom