CSSを動的に追加する方法

CSSStyleSheetとdocument#adoptedStyleSheetsを使うと、JavaScriptからCSSを動的に追加できる。

import cssText from './path/to/styles.css' 
// or
const cssText = 'a { color: red; } .is-active { background-color: blue; }'

const sheet = new CSSStyleSheet()
sheet.replaceSync(cssText)

document.adoptedStyleSheets.push(style)

ただし別コンテキストには追加できないので、そのときは素直にstyle要素を作ってheadに追加するしかなさそう。

Failed to execute ‘indexed value’ on ‘ObservableArray<CSSStyleSheet>’: Sharing constructed stylesheets in multiple documents is not allowed