v-html

親のコンポーネントから文字列をタグつきで受け取って表示する際

<div v-html="content"></div>

こんな感じで指定しておくと、親で content="<a href='#'>link</a>" と指定された文字列がタグとして反映されて出力されます。ただ、 scoped されたこの中身にスタイルをあてようとすると、ひとクセ必要です。

<style scoped>
  .a >>> .b {
    /* Styles */
  }
</style>

上記のように >>> コンビネータを使用することで、適用することができます。
ただ、 <style lang="scss" scoped> した時にうまくあたらなかったのでメモ。

そんな時は `/deep/` コンビネータを使う

SASS のようなプリプロセッサは >>> をうまく解析できないため、エイリアスになっている /deep/ を代わりに使います。

<style lang="scss" scoped>
  .a {
    /deep/ .b {
      /* Styles */
    }
  }
</style>

としたらうまくあたりました。

<template>
  <div>
    <dl>
      <dt>{{ dt }}</dt>
      <dd class="a" v-html="dd"></dd>
    </dl>
  </div>
</template>

<script>
  export default {
    props: ['dt', 'dd']
  }
</script>

<style lang="scss" scoped>
  .a {
    /deep/ .b {
      /* Styles */
    }
  }
</style>

ちなみに受け渡す元の要素には <a class="b" href="#">link</a> のようにクラスをつけておいた方がいいらしいです。

v-html

そんな時は /deep/ コンビネータを使う

参考

そんな時は `/deep/` コンビネータを使う