アコーディオンメニューにおける条件付きレンダーについて
解決したいこと
Page Speed Insightにおける「過大なDOMサイズの回避」のために、子要素を条件付きレンダーするアコーディオンメニューを作成しようとしています。
子要素のdisplayを切り替えることで表示を切り替えるケースが多く見られますが、条件付きレンダーによる実装はアクセシビリティやパフォーマンス上の問題がありますか？
該当するソースコード
サンプルコードはSvelteで記載しています。
<script lang="ts">
export let isExpanded: boolean = false;
</script>
// 普通はこう
<div aria-expanded={isExpanded} aria-control="target">
foo
</div>
<div
id="target"
aria-hidden={!isExpanded}
style:display={isExpanded ? 'block' : 'hidden'}
>
bar
</div>
// これはあり？
<div aria-expanded={isExpanded} aria-control="target">
foo
</div>
{#if isExpanded}
<div id="target">
bar
</div>
{/if}
0 likes