混乱するのでざっくりフレーズベースでまとめる
大枠としての技術を示すもの
WebComponents
WebComponentsはHTMLをコンポーネント化するための技術の総称。主に以下の3つの技術をつかって実現を目指している。
- CustomElement
- ShadowDOM
- HTMLテンプレート
詳しくは以下のページを参照のこと。
CSS in JS
CSSのグローバルスコープを解決する手法の一つとして、Javascriptの記述に織り込む形でCSSを構成する考え方があり、それらを体現したライブラリのことがCSS in JSと呼ばれている。代表的なものとして CSS Modules,Styled Component,Emotionなどがある
CSS Modules
CSS ModulesはJavaScriptからCSSをインポートするような記述で連動させる仕組みの名前、詳しくは以下のブログにまとまっているので参照のこと。
Styled-Component
ReactのJSXの範疇の中でCSSのスタイルを閉じ込める仕組みの一つがStyled-Compnent。詳しい仕組みなどは以下のブログに紹介されているので参考のこと。
特定の仕様を示すもの
@layer
CSSカスケードに関してレイヤーを追加する提供予定の記述のこと。2024年時点ではまだ仕様策定中。カスケードレイヤーとも呼ばれることがある。詳しい仕様としては以下参照のこと。
@scope
CSSの適用範囲を決める記述のこと.2024年時点ではまだ仕様策定中。Scoped Styleと呼ばれることもある。仕様としては以下の内容を参照のこと。
CSS Scope
CSS自体の適用の範疇を示す言葉、WebComponentsでのShadowDOMでは別の切り口でスコープが区切られるため、それらの説明などのときに使われるフレーズ。（適用の話に関してはこちらを参照のこと）
MDNのドキュメントに登場するので、詳しくは以下を参照のこと。
Scoped CSS
Vue.jsのSFC(Single File Component=単一ファイルコンポーネント)が提供するCSSの適用範囲を狭める機能のこと。詳しくは以下のVue.jsの説明を参照のこと。
その他
ViewComponent
Rails用のgemの名称。部分的なHTMLを作成するためのフレームワーク。詳細は以下参照のこと。
