よくある質問

以下に mdui コミュニティでよくある質問と公式の回答をまとめました。質問する前に類似の質問がないか探すことをお勧めします。

自己終了タグを使用するとコンポーネントが表示されないのはなぜですか？

mdui は Web Components をベースに開発されたコンポーネントライブラリです。Web Components 仕様は自己終了タグをサポートしていないため、mdui コンポーネントには必ず終了タグを追加してください。

<!-- 誤った使い方 -->
<mdui-text-field />

<!-- 正しい使い方 -->
<mdui-text-field></mdui-text-field>

コンポーネントの読み込みが完了する前にコンポーネントを非表示にするには？

mdui コンポーネントは JavaScript によって登録されるため、js ファイルが読み込まれてコンポーネントが登録される前に、コンポーネントは一時的にスタイルが適用されていない状態で表示されることがあります。以下の 2 つの方法でこの問題を解決できます。

1 つ目の方法は、CSS の :defined 擬似クラスを使用して、未登録の mdui コンポーネントを非表示にすることです。以下の CSS コードは、未登録のすべての mdui コンポーネントを非表示にし、コンポーネントの登録が完了するとすぐに表示します：

:not(:defined) {
  visibility: hidden;
}

もう 1 つの方法は、JavaScript の customElements.whenDefined() メソッドを使用することです。このメソッドは promise を返し、指定されたコンポーネントの登録が完了するとその promise が resolve されます。何らかの理由でコンポーネントが読み込めない場合に対処するために、Promise.allSettled() メソッドを併用することができます。

以下の例では、まず opacity: 0 で <body> を非表示にし、コンポーネントの登録が完了した後にページをフェードイン表示します。また、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>