Vue中如何防止v-html样式泄漏问题？

以下是几种可行的解决方案，根据你的场景选择：

• 给v-html容器添加专属命名空间类
  给承载动态HTML的div设置一个唯一类名（比如dynamic-html-wrapper），要求动态HTML内的所有样式都嵌套在这个类名下。如果动态HTML是你可控的，这是成本最低的方案。
  示例动态HTML中的样式写法：

  .dynamic-html-wrapper h2 { font-size: 18px; }
  .dynamic-html-wrapper .content { line-height: 1.6; }
  

• 用Shadow DOM实现完全样式隔离
  通过手动创建Shadow DOM，把动态HTML挂载到隔离的DOM环境中，内部样式完全不会影响外部元素。
  Vue组件示例：

  <template>
    <div ref="htmlHost"></div>
  </template>
  
  <script setup>
  import { ref, watch, onMounted } from 'vue'
  const htmlHost = ref(null)
  const dynamicContent = ref('<style>p { color: #333; }</style><p>第三方动态内容</p>')
  
  function renderIsolatedHtml() {
    if (!htmlHost.value) return
    // 清空之前的Shadow DOM
    htmlHost.value.innerHTML = ''
    // 创建Shadow DOM
    const shadowRoot = htmlHost.value.attachShadow({ mode: 'open' })
    // 插入处理后的动态内容
    shadowRoot.innerHTML = dynamicContent.value
  }
  
  onMounted(renderIsolatedHtml)
  watch(dynamicContent, renderIsolatedHtml)
  </script>
  

  注意：Shadow DOM内部无法直接使用外部全局样式，若需要同步外部样式，可在Shadow DOM内添加<link>标签引入全局样式文件。

• 过滤动态HTML中的全局样式（适用于不可控内容）
  如果动态HTML来自第三方，无法修改其样式，可以在渲染前解析并修改CSS规则，给所有选择器加上容器类名前缀。简单实现示例：

  function prefixCssSelectors(rawHtml, prefixClass) {
    const parser = new DOMParser()
    const doc = parser.parseFromString(rawHtml, 'text/html')
    const styleTags = doc.querySelectorAll('style')
  
    styleTags.forEach(tag => {
      let css = tag.textContent
      // 给基础选择器添加前缀（复杂场景建议用postcss等专业库处理）
      css = css.replace(/([^\s,.#]+)(?=\s*{)/g, `.${prefixClass} $1`)
      css = css.replace(/(\.[\w-]+)(?=\s*{)/g, `.${prefixClass}$1`)
      tag.textContent = css
    })
  
    return doc.body.innerHTML
  }
  
  // 使用方式
  const safeHtml = prefixCssSelectors(thirdPartyHtml, 'dynamic-html-wrapper')
  

  这种方式能避免全局样式泄漏，但复杂CSS选择器（如伪类、嵌套选择器）需要更完善的解析逻辑。

内容的提问来源于stack exchange，提问作者Mohammed Marjan