Initializing files on page load is breaking the scope

I got a problem loading files for later use:

let moduleDefaults = new Map();

const registerComponents = () => {
    // ^ Check for .ce files -> then register components
    for (const [key, value] of Object.entries(filePaths)) {
        if (value.name.toLowerCase().includes(".ce.vue")) {
            let name = value.name.split(/[\/]/).pop().toLowerCase(),
                tagName = name.substr(0, name.indexOf('.'));

            // Problem arises here
            // The module get's initialized and loads all CSS into the DOM 
            value().then(module => {
                moduleDefaults.set(name.substr(0, name.indexOf('.')), module.default);
                customElementsMap.set(tagName, defineCustomElement(moduleDefaults.get(tagName)));
                window.customElements.define("pk-custom-" + tagName, customElementsMap.get(tagName));
            });
        }
    }
}

I want to initialize the webcomponents on page load to render them as soon as I need them.
The CSS files should be scoped inside the components scope. When I initialize them using

value().then(module => { ...

The CSS files (Tailwind in this case) is available in the global scope and affecting the style which is definitely not wanted. Is there a way to keep the CSS scope to the components?