リストが6つ表示されていれば、全ての方法で CSS 読み込み・設定が成功しています。
また、script 要素の属性値や記載位置による読み込みタイミングを確認するため、全16パターンの各種情報をコンソール出力しています。
script
: その場で同期的に JS が DL され、その場で同期実行される (JS の DL から実行の間まで HTML パースは中断される)script async
: その場で非同期に JS が DL され、HTML パースを待たずに実行される。複数の script async
がある場合は書かれた順番が保証されず非同期的に実行されるscript defer
: その場で非同期に JS が DL され、HTML パースを待って実行される (DOMContentLoaded の直前)。複数の script defer
がある場合は書かれた順番に実行されるscript type="module"
: defer 相当のタイミング、つまり HTML パースを待って実行されるscript type="module" async
(未検証) : HTML パースを待たずに実行できるUncaught SyntaxError: import assertions are not currently supported
エラーにより動作せずscript type="module"
に crossorigin="use-credentials"
を付けると良いという情報もあったが、恐らく ESModules の CORS 問題ではなく CSS Module Scripts に対応していないと思われる