CSSで popover-close は無い？
CSSで :popover-open はあるけど、:popover-close は無い？回答現時点では、:popover-open は CSS の擬似クラスとして存在しますが、:popover-close のような閉じた状態に対応する擬似クラスは存在しません。:popover-open は Popover API に関連しており、<dialog> 要素に似た挙動を持つポップオーバーが表示されているときに、その要素にスタイルを適用できます。しかし、閉じた状態を直接参照する擬似クラスは用意されていないため、閉じた状態を管理するには、JavaScript を使う必要があります。もしポップオーバーが閉じたときにスタイルを変更したい場合、popover の状態を JavaScript で監視し、状態に応じてクラスを付与・削除する方法が一般的です。例）■javascriptconst popoverElement = document.querySelector('.popover');popoverElement.addEventListener('close', () => { popoverElement.classList.add('closed');});popoverElement.addEventListener('open', () => { popoverElement.classList.remove('closed');});■cssCSSでそのクラスにスタイルを指定.popover.closed { /* スタイル */}これで、ポップオーバーが閉じたときに特定のスタイルを適用できます。
