<template>
  <h1>Example</h1>
  <p>Scoped styling for HTML included with the 'v-html' directive now works by using CSS Modules with &lt;style module&gt;, instead of &lt;style scoped&gt;.</p>
  <div v-html="htmlContent" :id="$style.htmlContainer"></div>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: "<p>Hello from v-html</p>"
    }
  }
};
</script>

<style module>
  #htmlContainer {
    border: dotted black 1px;
    width: 200px;
    padding: 10px;
  }
  #htmlContainer > p {
    background-color: coral;
    padding: 5px;
    font-weight: bolder;
    width: 150px;
  }
</style>                  

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)
app.mount('#app')