◆ css を ES Modules でインポートできるようになる
◆ CSSStyleSheet の値を取得できるので ShadowRoot の adoptedStyleSheets に設定する
◆ コンポーネントのスタイル定義がしやすくなる
8 月の終わりに出る予定の 93 の新機能を見ていたら CSS Modules がありました
以前この記事で少し触れたやつです

import 方法は少し前に使えるようになった JSON Modules と同じで assert をつけます

<!doctype html>
<script type="module" src="foo-bar.js"></script>

<foo-bar></foo-bar>

foo-bar.js
import css from "./foo-bar.css" assert { type: "css" }

customElements.define("foo-bar", class extends HTMLElement {
	constructor() {
		super()

		this.attachShadow({ mode: "open" })
		this.shaddorRoot.adoptedStyleSheets = [css]
		this.shadowRoot.innerHTML = `
			<div>
				text
			</div>			
		`
	}
})

foo-bar.css
div {
	color: red;
}

type: "css" でインポートした場合は CSSStyleSheet 型の値が default でインポートできます
それ以外の名前付きでインポートできるものは特になにもないようです

CSSStyleSheet の値は document や ShadowRoot の adoptedStyleSheets に設定することでそれらのスタイルに反映できます
WebComponent で作るときに CSS ファイルを分けるとインポートするのが少し面倒だった手間が無くなります

あとは HTML Modules も早く来てほしいですね