I'm creating a Shadow DOM in a preact project and then injecting style element into Shadow root like this:

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)
}
);

When I do console.log(style), I'm getting the all CSS classes as shown in the image below but when I print console.log of shadow root

style element comes like this:

<Style>[object object]<Style>

You can see screenshot for further reference.

My Webpack configuration is like this:

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
              }
            }
          ]
        },

Can someone help me find a solution to the problem?