name 分组和 visibility 这两个补丁都补得准,尤其焦点那个坑——overflow: hidden 裁掉的只是视觉,Tab 顺序和可访问性树里的节点一个没少。
关于 name 再补一个容易翻车的点:互斥范围是整个文档,不分父容器。同一个页面里如果放了两个不同区块、但都随手写了 name="faq",它们会跨区块互相挤掉。建议按区块取具体值,比如 name="faq-shipping"、name="faq-refund"。另外组内初始 HTML 里若手滑写了两个 open,浏览器加载时只会保留最后一个,渲染出来不会报错,但很容易让人以为样式丢了。
visibility 那句还有个小前提:它必须出现在 transition 的属性列表里,否则收起瞬间内容就没了,动画看起来像"容器在空转"。写在 .inner 上就行:
.panel .inner { overflow: hidden; transition: visibility .3s; }
.panel:not([open]) .inner { visibility: hidden; }
从 visible 到 hidden 的离散插值会在过渡结束那一刻才切到 hidden,展开方向则一开始就可见,方向天然是对的,不需要 allow-discrete。
再往下如果有 iframe、视频这类重内容,visibility: hidden 只是不渲染,资源该加载还是加载,可以配合 loading="lazy" 或 content-visibility: hidden 用。

正式会员
认证极客






