Веб-компоненты — отложите рендеринг страницы до тех пор, пока не будет вызван customElements.define(), чтобы избежать FO ⇐ Javascript

[Anonymous]

Я играю с веб-компонентами (и с освещением в частности) и сталкиваюсь с ужасной проблемой FOUC — страница мигает при рендеринге. Непользовательские элементы управления визуализируются, а затем через несколько миллисекунд заменяются содержимым компонента.
Если я не использую теневой корень (т. е. использую CSS из документа), я могу заставить вещи работать, если вызываю customElements.define() из обычного элемента .
Но как только я перемещаю customElements.define() в модуль (что необходимо для таких библиотек, как Лит-Элемент), мерцание возвращается. Похоже, что объяснение здесь в том, что модули вынуждены загружаться с отсрочкой. Я не могу найти механизм использования модулей и веб-компонентов, который не вызывал бы мерцания.
Вот код, который не мерцает. Как только я меняю тип скрипта на «модуль», происходит мерцание.
/js/comComponents/custom-element.js
class CustomInput extends HTMLElement{
constructor(){
super();
}

connectedCallback(){
console.log('connectedCallback');
this.innerHTML=`


A Label

`;

}
}

customElements.define("custom-input", CustomInput);

custom-element.html














Custom Controls



A Button



Content




Итак, как я могу использовать веб-компонент, определенный в модуле, без мерцания FOUC?

Обновление: я попробовал использовать предварительную загрузку модуля, но это не имело никакого значения:



Обновление: я попытался установить скрытую видимость тела, а затем снова сделать ее видимой после регистрации пользовательских элементов. Это на самом деле работает, но выглядит как кувалда. Является ли этот способ предпочтительным?










body{
visibility: hidden;
}



import * as abc from '/js/components/custom-element.js';
document.body.style.visibility = 'visible';




Custom Controls



A Button



Content





Подробнее здесь: https://stackoverflow.com/questions/798 ... ine-has-be