Vue.js SFCでscoped cssを利用しているとdefaultでは以下の通りslotで挿入した要素にスタイルを当てることができません。 デフォルトでは、スコープ付きスタイルは親コンポーネントが所有するコンテンツとみなされ、でレンダリングされるコンテンツに影響を与えません。 SFC スタイルの機能 | Vue.js こういう場合にどういう方法があるのかメモ📝 SFCでscoped cssしつつslotを使って挿入した要素にStyleを当てる方法 ディープセレクタを使う :deepを使うとscoped cssで定義したスタイルを子要素にも伝搬させることができます。これはslotで挿入した要素にも反映されます。 scoped スタイルのセレクタを「深く」したい場合、例えば子コンポーネントに影響を与えたい場合は、:deep() 擬似クラスを使用できます。 <style scoped>