はじめに この記事では、筆者がShadow DOM を用いてフォームの入力データをモーダルでプレビュー表示する方法の学習記録です。 ChatGPTによる文章が少し入ってます。あらかじめご了承ください。 背景 モーダル画面のプレビュー(背景が暗くなって出てくるやつ)でモーダルの外部で定義したCSSの影響を受けないようにhtmlをプレビュー要素として組み込みたいという場面に実務で遭遇しました。下のようなイメージ。 <!DOCTYPE html> <html lang="ja"> <head> <!-- 中略 --> <!-- ↓このスタイルは.modal内の要素に付与したくない --> <link rel="stylesheet" href="style.css"> <style> /* 親画面のCSSが書いてある */ </style> <!-- ↑このスタイルは.modal内の要素に付与し