.css ファイルを非同期で読み込む

流れは、

  1. <link>タグを作る
  2. 属性を設定
  3. document.headに埋め込み

link タグを作る

<link>タグはdocument.createElementを使って以下のように作れます。

const link = document.createElement('link');

Node としては存在しますが、まだ DOM 上にはない状態です。

属性を設定

.cssの読み込みなのでrelhrefが必要ですね。以下のように設定します。

link.rel = 'stylesheet';
link.href = '...'; // url

document.head に埋め込み

<head>タグが存在するマークアップだとdocument.head<head>タグを取得でき、クエリで取得する必要もない一番てっとり早い方法だと思います。なのでここに上記で作成したlinkを埋め込みます。

ある要素の下に要素を埋め込むにはNode#appendChildを使います。以下はそのコードです。

document.head.appendChild(link);

これでこのような HTML になるはずです。そして、 DOM に追加された瞬間にそのhrefに指定したファイルの取得が始まります。

<head>
  <link rel="stylesheet" href="...">
</head>

読み込み終わりのタイミングを知る

スタイルシートなので何かに依存しないと動かないといったことはあまりないと思いますが、知りたい場合はloadイベントを使います。これは.cssファイルの読み込みが終わったら発火するイベントなので、これを使えば読み終わったらアラート出すみたいなことができます。

link.addEventListener('load', () => {
  alert('読み込み完了');
});

document.head.appendChild(link);

DOM に埋め込む前に定義してください。