How correct import styles

Question

I using vanilla javascript + Vite, why styles doesn't work?

this point I import style of logo component and this is common style.css

@import url("./CORE/Logo/style.scss");

*,
body,
html {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}

and this is section logo component and how this I import my style from common style.css and implemented

import "../../style.css"

export default () =>
    `
    <main>
        <section>
            <figcaption class="logo">
                <img src="/images/logo.png" alt="logo" />
            </figcaption>
        </section>
        <section>
            <p class="name">Test</p>
        </section>
   </main>`;

Answer 1

You can import CSS using import assertions, see https://web.dev/articles/css-module-scripts.

import sheet from "../../style.css" with {type: "css"};
document.adoptedStyleSheets = [sheet];

Answer 2

const shadowRoot = document.getElementById('your-shadow-root-id').attachShadow({mode: 'open'});
const styleSheet = new CSSStyleSheet();
await styleSheet.replace('your css content here');
shadowRoot.adoptedStyleSheets = [styleSheet];

CSSStyleSheet