在VueJS组件中呈现电子邮件HTML，而不会影响全局样式

Question

我正在起草VueJS应用程序，该应用程序允许用户插入电子邮件HTML模板，进行一些处理并随后下载处理后的模板。

我有两个组件，并尝试使用HTMLViewer函数通过v-html组件呈现HTML，如下所示：

首页：

<template>
  <div>
    <mdb-container>
      <mdb-row>
        <mdb-col>
          <div class="form-group">
            <mdb-input
              type="textarea"
              label="Paste your HTML here:"
              outline
              :rows="25"
              v-model="emailTemplate"
            />
          </div>
        </mdb-col>
        <mdb-col>
          <HTMLViewer :emailTemplate="emailTemplate" />
        </mdb-col>
      </mdb-row>
      <mdb-row class="ml-1">
        <mdb-btn outline="default">Next</mdb-btn>
        <mdb-btn outline="danger" @click="clearEmailTemplate">Clear</mdb-btn>
      </mdb-row>
    </mdb-container>
  </div>
</template>

<script>
import { mdbContainer, mdbRow, mdbCol, mdbInput, mdbBtn } from 'mdbvue';
import HTMLViewer from '../components/HTMLViewer';

export default {
  name: 'HomePage',
  components: {
    mdbContainer,
    mdbRow,
    mdbCol,
    mdbInput,
    mdbBtn,
    HTMLViewer
  },
  data() {
    return {
      emailTemplate: '',
    };
  },
  methods: {
    clearEmailTemplate() {
      this.emailTemplate = null;
      this.iframeVisible = false;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

HTMLViewer：

<template>
    <div v-html="emailTemplate">
    </div>
</template>

<script>
import { mdbContainer, mdbRow, mdbCol, mdbInput, mdbBtn } from 'mdbvue';

export default {
  name: 'HTMLViewer',
  components: {
    mdbContainer,
    mdbRow,
    mdbCol,
    mdbInput,
    mdbBtn
  },
  props:['emailTemplate'],
  data() {
    return {
    };
  },
};
</script>

<style scoped>
</style>

我面临的问题是电子邮件模板CSS样式覆盖了父组件（主页）中的样式。

我尝试使用iFrame来解决此问题，但同时也会产生许多与与HTML模板进行交互有关的不同问题，因此，我希望尽可能避免使用iframe。

我的问题是-是否有一种很好的方法来确保插入的电子邮件模板HTML不会影响全局样式？