자주 묻는 질문
다음은 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;
}
다른 방법은 JavaScript의 customElements.whenDefined() 메서드를 사용하는 것입니다. 이 메서드는 Promise를 반환하며, 지정된 컴포넌트가 등록되면 해당 Promise가 resolve됩니다. 특정 컴포넌트가 어떤 이유로 로드되지 못하는 경우를 처리하려면 Promise.allSettled() 메서드를 함께 사용합니다.
다음 예제에서는 먼저 opacity: 0으로 <body>를 숨긴 다음, 컴포넌트 등록이 완료되면 페이지를 페이드인(fade-in)합니다. 또한, Promise.allSettled()를 사용하여 모든 Promise가 완료될 때까지 기다리므로, 특정 컴포넌트를 로드할 수 없더라도 페이지가 정상적으로 표시됩니다:
<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>