Open1
【作業ログ】問題_jsファイルが実行されない？_ゲームから始まるタスク管理ツール
y現象
innerHTML で挿入した <script> が実行されない
現状の構造
下記の自作テンプレートを使用
web標準技術のみを使用した疑似SPA構成
-
index.html… 常に最初に1回だけ読み込まれる - ページ切り替え（#game など） … JavaScriptで
game.htmlの中身を fetch して <my-content> に挿入
フォルダ構成
components/pages/game.html
js/game.js
そしてgame.htmlの中に
<script type="module" src="./js/game.js"></script>
調査
- innerHTML で挿入した
game.html<script> が実行されない
👉そもそも「innerHTML経由では実行されない」のがブラウザの仕様（XSS（クロスサイトスクリプティング）攻撃の防止のためらしい） -
index.htmlに<script>記載
→ console.logは出力可能。ただしイベントは実行されない
→ JavaScriptは実行されている。でも実行タイミングが間違っている？
↓データの流れ
index.html
└─ <my-content> (Shadow DOM)
└─ <main id="app">
1. index.html 読み込み
└─ script(game.js) 実行
→ console.log は出る
→ getElementById はまだ null
→ イベント登録失敗
2. MyContent.connectedCallback
└─ renderRoute() fetch → innerHTML
→ #progress などが DOM に追加
→ ここで JS を実行しない限りバーもイベントも動かない
👉スクリプトの実行タイミングが「DOMが準備される前」
まとめ
- 従来の <script> をHTML内に置く方式はSPAでは使えない
- DOM要素にアクセスするJSは「挿入後」にしか実行できない
対策として次にやること
Web Component化してHTML + CSS + JS を1つのカスタム要素にまとめる
参考