Кроссбраузерные альтернативы для параметров модуля IMPORT ASSERT

В браузерах на базе Chrome я бы ИМПОРТировал таблицу стилей через: -

Мой компонент -

import sheet from '/Vanilla/ScrollGrid.css' assert {type: 'css'};

или вызов веб-страницы пользователя -

if (userStyles != undefined && userStyles != null) {
    if (typeof userStyles == "string") {
        let userStylesURL;
        try 
        {
            userStylesURL = new URL(userStyles, baseURL);
        } catch (err) {
            console.info(err.message);
        }
        if (userStylesURL != undefined) {
            userSheet = (userStylesURL.protocol == "http:" || "htps:")
        }
    }
}
if (userSheet)
{
    myCSSMod = await import(userStyles, { assert: {type: "css"}});
}

var x = new sg.ScrollGrid("myTable", dimCols, options, myCSSMod.default);

Тогда это позволит мне загружать таблицы стилей во время выполнения: -

Мой компонент ScrollGrid: -

    if (userStyles != undefined && userStyles != null) {
        if (userStyles.type == "text/css") {
            this.#shadowRoot.adoptedStyleSheets.push(userStyles);
        }
    }

Я могу легко заменить импорт модуля созданием динамического тега LINK: -

    let link = document.createElement('link');
    link.href = "./toggle.css";
    link.rel = "stylesheet";
    link.type = "text/css";
    this.shadowRoot.appendChild(link);

Теперь я хочу поддерживать Safari и Firefox, поэтому рассматриваю альтернативы.

Но мне нужна помощь/совет: «Как заменить метод IMPORT в моем веб-компоненте?»

Я пробовал использовать атрибут .SHEET из элемента LINK, но наткнулся на правило «должен быть изготовленный CSSStylesheet()», поэтому знаю только три варианта. (Примечание: я бы хотел, чтобы мой компонент продолжал поддерживать необязательный параметр StyleSheet в виде CSSStylesheet, а не строкового URL-адреса.)

1. Попросите вызывающую страницу загрузить таблицу стилей с помощью FETCH или каким-либо другим способом в строку. Затем вызывающая сторона может вызвать конструктор CSSStylesheet(string) и передать мне результат. Это звучит привлекательно, поскольку позволяет жестко запрограммировать небольшие строки (с очень небольшим количеством правил), а также обрабатывать более крупные внешние файлы CSS.

2. Измените мой параметр на строку URL-адреса и создайте элемент LINK во время выполнения в моем компоненте.

3. Имейте «отключенный» тег STYLE, указывающий на внешний URL-адрес, а затем получите внутренний HTML в виде строки. Не знаю, заполняется ли внутренний HTML для отключенных тегов стиля или использование URL-адреса в теге стиля теперь устарело.

Веб-компонент -

    if (userStyles != undefined && userStyles != null) {
        if (userStyles.type == "text/css") {
            this.#shadowRoot.adoptedStyleSheets.push(userStyles);
        }
    }
    
    this.#shadowRoot.adoptedStyleSheets.push(sheet);

Есть еще варианты? Пожалуйста, не стесняйтесь озвучивать предпочтения.