closedby属性のPolyfillをscaffoldに追加

[teppei-d]

概要

<dialog> 要素の closedby 属性のPolyfillをscaffoldに追加し、Light Dismiss（背面クリックやESCキーでの閉じる動作）をブラウザ横断で実装可能にする。

背景

• closedby 属性は <dialog> 要素でLight Dismissを実装するための標準属性
• Safari等の一部ブラウザではまだサポートされていない（2026年2月時点）
• プロジェクト内でモーダル/ダイアログの実装が増えているため、標準的な実装基盤を整備したい

実装内容

1. Polyfillの追加

• Polyfill: dialog-closedby-polyfill
• 組み合わせ: Invokers Polyfillと併用可能

2. 導入場所

• scaffold/ の共通スクリプトに追加
• プロジェクト全体で利用可能にする

参考リンク

• MDN - closedby属性
• Can I Use - closedby
• Polyfill リポジトリ
• デモ

ブラウザサポート状況（2026年2月時点）

• ❌ Safari（未サポート）← Polyfillで対応

タスク

• npmからPolyfillを導入
• コードレビュー

備考

このPolyfillは一時的な対応です。主要ブラウザでのネイティブサポートが十分に普及したら削除予定（関連Issue: #833 ）

[teppei-d]

dialog要素 closedBy 属性のPolyfill導入再開について

以前、iOS 26.1 / 26.2（Safari 26系）において「プロパティ自体は存在するが機能が動作しない」というブラウザ側の不備により、Polyfillが誤判定を起こして動作しない懸念があったため、Scaffoldへの追加作業を停止していました。

本件について、ライブラリ側で修正パッチがリリースされ、解消の目処が立ちましたので報告いたします。

■ 状況の変化

導入予定のライブラリ dialog-closedby-polyfill の最新バージョンにて、Safari 26系の不完全な実装を正しく検知（behavioral test）し、強制的にPolyfillを適用する修正が行われました。

• 対象バージョン: v1.1.0 以降
• 修正内容: プロパティの有無ではなく、実際に機能が動作するかをテストする判定ロジックへの改善
• 参照Issue: Feature detection wrong in Safari 26.2 · Issue #13

■ 今後の対応

最新バージョンを適用することで、iOS 26系でも正しく機能が補完される見込みです。改めてScaffoldへの追加作業を再開し、以下の実機環境で期待通りの挙動になるか最終確認を進めます。

• iOS 18: ブラウザ標準機能（Native）の動作確認
• iOS 26.1 / 26.2: Polyfillによる補完動作の確認（特に ::backdrop クリック時の挙動）

検証が完了次第、改めてこちらにコメントいたします。