Как мне импортировать пользовательский веб-компонент асинхронно?

Question

Я сделал свой пользовательский элемент ввода (современный ввод текста для форм) в веб-компонент. Файл. js, который я создал для его реализации, состоит из трех частей.

Шаблон HTML:

const textInputTemplate = document.createElement('text-input-template');
textInputTemplate.innerHTML =
`
<div class="text-input-container">
    <!--Irrelevant-->
</div>
`;

Объявление класса элемента:

class textInput extends HTMLElement {

    static get observedAttributes() {
        return ['readonly'];
    }

    constructor () {
        super();
        // Shadow root
    } // End of constructor()

    connectedCallback () {
        // Custom attributes
    } // End of connectedCallback()

    disconnectedCallback () {
        // Remove event listeners
    } // End of disconnectedCallback()

    attributeChangedCallback(attribute, oldValue, newValue) {
        // Updatable attributes: readonly
    } // End of attributeChangedCallback()   
}

Наконец, метод, который связывает настраиваемый элемент с именем тега:

window.customElements.define('text-input', textInput);

Вопрос: Меня беспокоит, что использование <script src="./module-name"> является неэффективным или может вызвать ошибки в будущем, потому что оно загружается синхронно после загрузки остальной страницы. Поэтому мне интересно, есть ли более чистый / более профессиональный метод для асинхронного импорта веб-компонента, не вставляя весь модуль в такую ​​функцию:

export function textInput { // insert entire modules contents here }

Потому что мне нужны все три части модуля чтобы веб-компонент работал, я не могу экспортировать только класс веб-компонента.