Preguntas frecuentes
Aquí tienes algunas preguntas frecuentes de la comunidad de mdui y sus respuestas oficiales. Antes de hacer una pregunta, conviene comprobar si ya existe un problema similar.
¿Por qué no se muestra el componente al usar etiquetas auto-cerradas?
mdui es una biblioteca basada en Web Components, y esta especificación no admite etiquetas autocerradas. Asegúrate de usar siempre la etiqueta de cierre en los componentes de mdui.
<!-- Uso incorrecto -->
<mdui-text-field />
<!-- Uso correcto -->
<mdui-text-field></mdui-text-field>
¿Cómo ocultar los componentes antes de que terminen de cargarse?
Dado que los componentes de mdui se registran mediante JavaScript, antes de que se cargue el archivo JS y se registren los componentes, estos pueden mostrarse temporalmente sin estilos. Los siguientes dos métodos pueden resolver este problema:
Un método es usar la pseudo-clase CSS :defined para ocultar los componentes de mdui no registrados. El siguiente código CSS ocultará todos los componentes de mdui no registrados y los mostrará inmediatamente después de que se registren:
:not(:defined) {
visibility: hidden;
}
Otro método es usar el método customElements.whenDefined() de JavaScript. Este método devuelve una promesa que se resuelve cuando el componente especificado se ha registrado. Si quieres contemplar los casos en los que algún componente no llegue a cargarse por motivos concretos, puedes usar Promise.allSettled().
El siguiente ejemplo oculta primero el <body> con opacity: 0, y luego hace que la página se desvanezca después de que los componentes se hayan registrado. Además, el ejemplo usa Promise.allSettled() para esperar a que todas las promesas se completen, asegurando que la página se muestre correctamente incluso si algún componente no se puede cargar:
<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'),
]);
// Ahora los componentes button, card y checkbox se han registrado. Agrega la clase ready para que la página se desvanezca
document.body.classList.add('ready');
</script>