Часто задаваемые вопросы
Ниже собраны часто задаваемые вопросы сообщества mdui и официальные ответы. Прежде чем задать вопрос, рекомендуется поискать похожие проблемы.
Почему компоненты не отображаются при использовании самозакрывающихся тегов?
mdui — это библиотека компонентов, основанная на Web Components. Спецификация Web Components не поддерживает самозакрывающиеся теги, поэтому для компонентов mdui необходимо указывать закрывающий тег.
<!-- Неправильно -->
<mdui-text-field />
<!-- Правильно -->
<mdui-text-field></mdui-text-field>
Как скрыть компоненты до их загрузки?
Поскольку компоненты mdui регистрируются через JavaScript, до загрузки и регистрации JS-файла компоненты могут временно отображаться без стилей. Есть два способа решить эту проблему:
Первый способ — использовать CSS-псевдокласс :defined, чтобы скрыть незарегистрированные компоненты mdui. Следующий CSS-код скроет все незарегистрированные компоненты mdui и покажет их сразу после регистрации:
:not(:defined) {
visibility: hidden;
}
Второй способ — использовать метод customElements.whenDefined(). Этот метод возвращает promise, который разрешается (resolve), когда указанный компонент будет зарегистрирован. Чтобы обработать ситуации, когда какой-либо компонент по какой-то причине не загрузится, можно использовать Promise.allSettled().
В следующем примере <body> сначала скрывается с помощью opacity: 0, а после регистрации компонентов страница плавно появляется. Также используется Promise.allSettled() для ожидания завершения всех промисов, чтобы страница отобразилась, даже если какой-то компонент не загрузится:
<style>
body {
opacity: 0;
}
body.ready {
opacity: 1;
transition: 0.25s opacity;
}
</style>
<script type="module">
await Promise.allSettled([
customElements.whenDefined('mdui-button'),
customElements.whenDefined('mdui-card'),
customElements.whenDefined('mdui-checkbox'),
]);
// Теперь компоненты button, card, checkbox зарегистрированы, добавляем класс ready для плавного появления
document.body.classList.add('ready');
</script>