Скройте световой DOM (вложенные элементы) на веб-компонентах во время ожидания поглощения слотов, чтобы предотвратить ми ⇐ CSS

[Anonymous]

Я хочу предотвратить показ легкого содержимого DOM, пока он ожидает включения в . Я испробовал множество обходных путей.

Вот мой пример использования:

Один Два Три Оба типа элементов имеют по умолчанию для легкого DOM (вложенного контента).

Когда страница загружается, я вижу необработанный текст «Один», «Два» и «Три» столько, сколько потребуется времени для загрузки страницы (это очень заметно при большой загрузке страницы), а затем все поглощается в свои и скрыты, как и ожидалось.

Я пробовал скрывать дочерние элементы :host и :host, скрывать по умолчанию, а затем добавлять класс для его отображения и другие подобные динамические вещи. Даже выполнение this.style.display = 'none'; before присоединения shadowRoot в конструкторе не работает! Сумасшедшая штука. Все стили выполняются после их рендеринга в DOM, независимо от того, как они реализованы.

Нет ли простого решения, которое сразу же скроет его (а в идеале всегда скрывает светлый DOM и позволяет показывать светлый DOM в слоте)?

Мне НЕ нужна внешняя таблица стилей, управляющая этим, хотя это удовлетворяет конечную потребность (т. е. скрывает пользовательский элемент, а затем пользовательский элемент позже добавляет класс, который позволяет CSS его отображать). Суть в том, чтобы позволить компонентам делать свое дело, а не контролировать нюансы, что внешне разрушает всю цель компонентных элементов и их микро-DOM.