overlay プロパティは、最上位レイヤーでCSSトランジションが行われるようにするためのプロパティです。
具体的には、overlayプロパティを使うことで、以下のように、最上位レイヤーから削除することと、CSSトランジションの順番が入れ替わります（＝レイヤーが重なった部分もスムーズなCSSトランジションが行われるようになる）。
- 通常の場合
- 最上位レイヤーから削除される
- トランジションが行われる
- overlayが使われている場合
- トランジションが行われる
- 最上位レイヤーから削除される
例）モーダル表示時の黒背景
通常の場合：モーダルを閉じると黒背景が先に消え、モーダルがフェードアウトする。
overlayが使われている場合：モーダルを閉じると、黒背景とモーダルが同時にフェードアウトする。
以下のようにすると、overlay プロパティを使うことができます。
[popover] {
transition: overlay 1s allow-discrete;
}【参考】
https://coliss.com/articles/build-websites/operation/css/adds-6-new-css-features-in-chrome-117.html
