1

我正在编写一个库，您可以使用它将 React 应用程序呈现为 Web 组件。像这样：

ReactWebComponent.create(<App />, 'my-react-web-component', { css: 'inject' });

你可以看到有一个选项{ css: 'inject' }。要使用 CSS 创建 Web 组件，我需要将<link>标签添加到 shadow dom。这发生在我的图书馆内。

虚拟代码：

ReactWebComponent.create = function(options) {
  const proto = Object.create(HTMLElement.prototype, {
    attachedCallback: {
      value: function() {
        const mountPoint = document.createElement('span');
        const shadowRoot = this.createShadowRoot();
        shadowRoot.appendChild(mountPoint);
        shadowRoot.insertAdjacentHTML('beforeend', options.css);
        ReactDOM.render(<App />, mountPoint);
      }
    }
  });
  document.registerElement('react-web-component', {prototype: proto});
};

现在我当然不想附加字符串'inject'。相反，我想编写一个 Webpackplugin或者获取由extract-text-webpack-pluginloader生成的 CSS 文件并在有. 所以从<link>'inject'

ReactWebComponent.create(<App />, 'my-react-web-component', { css: 'inject' });

我想生成这个

ReactWebComponent.create(<App />, 'my-react-web-component', { css: '<link rel="stylesheet" type="text/css" href="styles.a4e5f9.css">' });

我认为替换部分可以很容易地完成RegEx，但是我很困扰如何获取 CSS 文件名以及如何转换 JS 文件。

4

0 回答 0