title: Inject CSS styles to shadow root via Webpack
body: <p>I am attempting to modify the styles of web component that created with shadow root.</p>
  
  <p>I see that the styles are added to a <code>head</code> tag but it has no effect on the <code>shadow root</code> as it's encapsulated.</p>
  
  <p>What i need is to load the styles of all components and make them appear inisde the <code>shadow root</code>.</p>
  
  <p>This is a part of creating the web component:</p>
  
  <p><strong>index.tsx</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { App } from './App';
  import './tmp/mockComponent.css'; // This is the styling i wish to inject
  
  
  let container: HTMLElement;
  
  class AssetsWebComponent extends HTMLElement {
  
      constructor() {
          super();
          this.attachShadow({ mode: 'open' });
          const { shadowRoot } = this;
          container = document.createElement('div');
          shadowRoot.appendChild(container);
          ReactDOM.render(&lt;App /&gt;, container);
  
      }
  }
  
  window.customElements.define('assets-component', AssetsWebComponent);
  </code></pre>
  
  <p><strong>App.ts</strong> // Regular react component</p>
  
  <pre><code>import React from 'react';
  import './App.css';
  import { MockComponent } from './tmp/mockComponent'
  
  export const App: React.FunctionComponent = (props) =&gt; {
      return (
          &lt;MockComponent /&gt;
      );
  };
  </code></pre>
  
  <p><strong>webpack.config.ts</strong></p>
  
  <pre><code>// @ts-ignore
  const path = require('path');
  const common = require('./webpack.common.ts');
  const merge = require('webpack-merge');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = merge(common, {
      mode: 'development',
      output: {
          filename: '[name].bundle.js',
          path: path.resolve(__dirname, 'dist'),
      },
  
      module: {
          rules: [
              {
                  test: /\.css$/,
                  use: [
                      {
                          loader: 'style-loader',
                          options: {
                              insert: function (element) {
                                  const parent = document.querySelector('assets-component');
  
                                  ***This what i want, to inject inside the shadowRoot but it 
                                  never steps inside since the shadowRoot not created yet***
  
                                  if (parent.shadowRoot) {
                                      parent.shadowRoot.appendChild(element);
                                  }
                                  parent.appendChild(element);
                              },
                          },
                      },
                      'css-loader',
                  ],
              },
              {
                  test: /\.scss$/,
                  use: [
                      'style-loader',
                      'css-loader',
                      'sass-loader',
                  ],
              },
          ],
      },
  
      plugins: [
          new HtmlWebpackPlugin({
              template: './src/template.html',
          }),
      ],
  
      devtool: 'inline-source-map',
  });
  </code></pre>
  
  <p>Since the <strong>MockComponent</strong> can have more components inside, I rely on Webpack to inject all styles to the <code>shadow root</code>.
  I am using <code>style-loader</code> to inject the styles but it's not working well.</p>
  
  <p>What I am doing wrong or is there any alternative for this solution. </p>