Estoy creando un Shadow DOM en un proyecto previo y luego inyectando un elemento de estilo en la raíz de Shadow de esta manera:

 import style from "./layout/main.css"; loader(window, defaultConfig, window.document.currentScript, (el, config) => { const shadowHost = document.querySelector('#widget-_hw'); shadowHost?.attachShadow({ mode: 'open' }); const shadowRoot = document.querySelector('#widget-_hw')?.shadowRoot const renderIn = document.createElement('div'); const styleTag = document.createElement('style'); styleTag.innerHTML = style; shadowRoot?.appendChild(styleTag); renderIn.setAttribute('id', 'render-div'); shadowRoot?.appendChild(renderIn); render(h(App, { ...config, element: el }), renderIn) } );

Cuando hago console.log (estilo), obtengo todas las clases de CSS como se muestra en la imagen a continuación, pero cuando imprimo console.log de shadow root

elemento de estilo viene así:

 <Style>[object object]<Style>

Puede ver la captura de pantalla para mayor referencia.

La configuración de mi Webpack es así:

 module: { rules: [ // packs SVG's discovered in url() into bundle { test: /\.svg/, use: 'svg-url-loader' }, { test: /\.css$/i, use: [ { loader: 'style-loader', options: { injectType: 'singletonStyleTag' } }, { // allows import CSS as modules loader: 'css-loader', options: { modules: { // css class names format localIdentName: '[name]-[local]-[hash:base64:5]' }, sourceMap: isDevBuild } } ] },

¿Alguien puede ayudarme a encontrar una solución al problema?