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

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

我有两个组件，并尝试通过

HTMLViewer

组件使用

v-HTML

函数呈现HTML，如下所示：

主页：

下一个
清楚的
从“mdbvue”导入{mdbContainer、mdbRow、mdbCol、mdbInput、mdbBtn}；
从“../components/HTMLViewer”导入HTMLViewer；
导出默认值{
名称：'主页'，
组成部分：{
MDB容器，
mdbRow，
mdbCol，
mdbInput，
mdbBtn，
HTMLViewer
},
数据（）{
返回{
电子邮件模板：“”，
};
},
方法：{
clearEmailTemplate（）{
this.emailTemplate=null；
this.iframeVisible=false；
}
}
};

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>

从“mdbvue”导入{mdbContainer、mdbRow、mdbCol、mdbInput、mdbBtn}；
导出默认值{
名称：“HTMLViewer”，
组成部分：{
MDB容器，
mdbRow，
mdbCol，
mdbInput，
mdbBtn
},
道具：['emailTemplate']，
数据（）{
返回{
};
},
};

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

我尝试使用iFrame来解决这个问题，但也产生了许多与HTML模板交互相关的问题，因此我希望尽量避免使用iFrame

---

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

电子邮件样式在哪里？它们是在邮件模板中并通过

v-html

注入页面还是分开？它们在电子邮件模板中并通过v-html注入页面。我也使用了iframe，但很难截获链接

<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>