글로벌 스타일에 영향을 주지 않고 VueJS 컴포넌트로 이메일 HTML 렌더링

글로벌 스타일에 영향을 주지 않고 VueJS 컴포넌트로 이메일 HTML 렌더링

이메일 HTML 템플릿을 삽입하고 처리한 템플릿을 나중에 다운로드 할 수 있는 VueJS 앱의 초안을 작성하고 있습니다.

2개의 컴포넌트가 있으며 HTML을 렌더링하려고 합니다.HTMLViewer으로 구성하다.v-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>

HTML 뷰어:

<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 스타일이 부모 컴포넌트(Home)의 CSS 스타일을 덮어쓰는 것입니다.

이 문제를 해결하려고 했지만 HTML 템플릿과의 상호작용에 관해 여러 가지 문제가 발생하고 있기 때문에 iframe은 가급적 피하고 싶습니다.

질문입니다. 삽입된 이메일 템플릿 HTML이 글로벌 스타일에 영향을 미치지 않도록 하는 좋은 방법이 있습니까?

언급URL : https://stackoverflow.com/questions/57560841/render-email-html-in-a-vuejs-component-without-impacting-the-global-styles