便利だけど別のモジュールのクラスを使えない
例えばこういう CSS

.readonly .edit {
	display: none;
}

.edit がこのモジュールのクラスで .readonly はモジュールの外で指定される場合
別クラスの .readonly であることを書くすべがないので実現できない

使用例

<user-list class="readonly">
	<user-item>
		<div>namae</div>
		<div>
			<button class="edit"></button>
		</div>
	</user-item>
	<user-item>...</user-item>
	<user-item>...</user-item>
	<user-item>...</user-item>
</user-list>

user-list に .readonly をつけたら中の user-item 全部で .edit を消したい

stackoverflow とか調べてみると 親のクラスを使わずそのコンポーネントにクラスを指定すべきというのが出てくる
この例で言うと全部の user-item に .readonly つける
ムダが多くて気がすすまないけどコンポーネント的には自分自身にオプションが設定されてるのが正しいのだとか
わかるといえばわかるけどやりたくない
WebComponents 自体 :host-context() でホストより外側のセレクタ使えるし

readonly が user-list より上の page-user みたいな要素についてる場合も許可するのなら いっそ モジュールで一意なクラスに変換しないのもあり
:global を使ってクラスにするか CSS Modules の変換対処外の属性を使ったセレクタにするか ([data-readonly] みたいなの)
readonly みたいなのだと良さそうだけどものによっては別の意味のセレクタが意図せず重複もありそう

親が子を把握してるのなら user-list が user-item の CSS をインポートして親側に子のセレクタをつけるのもあり
ただやりすぎるとすごく複雑になってきそうだし 別コンポーネント用の CSS Modules を使うのは控えめのほうがいいかも

仕様はこれ
https://github.com/css-modules/css-modules

CSS Modules 自体は仕様のみで実装はなし
実際の実装は Webpack とか

メジャーな実装は PostCSS のプラグイン
https://github.com/css-modules/postcss-modules

Parcel だとこれ
この記事も参照

深く考えてなかったけど Parcel で CSS Modules だけプラグイン設定方法が他と違ってる

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

https://parceljs.org/css.html

ドキュメントだとオブジェクトをエクスポートするので特別な対応が必要と書いてる

モジュールを有効にして以下のコードをバンドルする

.foo{}
.bar{}

import styles from "./test.css"
console.log(styles)

parcel build --no-minify index.js

結果は

/*略*/
})({"qP9o":[function(require,module,exports) {
module.exports = {
  "foo": "_foo_05711",
  "bar": "_bar_05711"
};
},{}],"Focm":[function(require,module,exports) {
"use strict";

var _test = _interopRequireDefault(require("./test.css"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

console.log(_test.default);
},{"./test.css":"qP9o"}]},{},["Focm"], null)
//# sourceMappingURL=/index.js.map

クラス名のオブジェクトがエクスポートされてる

モジュールが無効だとこう

/* 略 */
})({"qP9o":[function(require,module,exports) {

},{}],"Focm":[function(require,module,exports) {
/* 略 */

処理は何もなし
エクスポート内容が無いときも空オブジェクトで常にエクスポートがあるなら共通でも良さそうだけど モジュールがあるときだけ追加の処理でエクスポートしてそう
Parcel 内部でその判断するためにフラグ形式でモジュールを使うかどうか判断必要みたい

エクスポートの必要性
モジュール使わないときは出力される CSS はそのままのクラス名
JavaScript 側での処理はいらずに HTML や JavaScript では CSS ファイルに書いたままのクラス名を書くだけ
モジュール使うときは一意な名前に変換されてる
その変換後の名前を知るために JavaScript では CSS をインポートして元のクラス名から変換後のクラス名を取得して DOM に設定する