同じ破線ボーダーを、summary以外の子要素すべてに当てる方法と::details-contentに1回当てる方法で比較します。
p要素1
p要素2
p要素3
p要素1
p要素2
p要素3
interpolate-sizeとheightのtransitionを::details-contentに指定し、JSなしで開閉をなめらかに動かします。
想定した通りにアニメーションが適用されます
例として実装したアニメーションは@prefers-reduced-motionに対応していません。注意してご利用ください。