v-htmlにscopedでcssをあてる

例えば以下のようなデータが渡されてきて、それをそのままHTMLとして解釈して表示したいとします。

contents = [
    '<div>ふがふが</div>',
    '<div><a href="hogehoge.poriweb.com">リンクはこちら</a></div>'
]

データを受ける側が下記のようになっているとします。

<div class="contents">
  <span
    v-for="(content, i) in contents"
    :key="i"
    v-html="content" />
</div>

この時、aタグの色を red にしたいとします。
<a href="hogehoge.poriweb.com" style="color: red">リンクはこちら</a> とすれば色を変えることは可能ですが、v-htmlに渡す content にサニタイズを入れているとaタグにstyle属性は含まれていませんのでこの書き方は好ましくないです。(できません)

解決方法

ディープセレクタを使用すれば良いです。
ディープセレクタは親コンポーネントと子コンポーネントのセレクタを繋いで外側からCSSを適用できるようにする方法です。
v-html でもディープセレクタでcssを適用することができます。

<style scoped>
.contents >>> a {
  color: red;
}
</style>

ちなみにscssの場合

<style lang="scss" scoped>
.contents /deep/ a {
  color: red;
}
</style>

以上、備忘録です。