コンポーネント指向は CSS の局所性を保証しない

大げさなタイトル付けたけど中身はただの日記です。 CSS の局所性の定義とは…

---

今日仕事で Angular でコンポーネント指向のアプリを書いていて、 あるコンポーネントに含まれる透明の div に z-index が指定されていて、その div が他のコンポーネントの領域に覆いかぶさって、なぜかリンクがクリックできないというケースがあった。

これは明らかにそういったコードが悪いのだけど、コンポーネント指向で CSS の局所性を保証しても、それでユーザーの操作に何らかの干渉が起きないという保証はない。

当然だけど、あくまで CSS セレクタがそのコンポーネントにのみ適用される事が保証されても、依然 CSS で他のコンポーネントの領域を容易に侵略できるし、他にも行儀の悪い HTML や CSS や JavaScript は存在する。

今回は単に1つのコンポーネントのコードの責任である事が明白だったためそのコードを修正して解決したが、コンポーネント同士でかち合い、どちらが優先されるべきか判断しづらい場合もあり得そうだなとふと思った。

そういった場合は両方のコンポーネントを同時に使った開発者の選択に問題がありそうだけど、あくまで予想なので実際はどのようなケースがあるかまだ想像がついてない。