在动态注入的 html 中应用 css

Posted 2023-02-22

【中文标题】在动态注入的 html 中应用 css

【英文标题】：Apply css in dynamic injected html

【发布时间】：2021-09-09 08:25:39

【问题描述】：

我正在做类似 *** 编辑器的东西。获取 markdown 文本，将其转换为 html，然后将其注入预览区域。但是当我尝试将 CSS 应用于注入的 HTML 元素时，它被忽略了。在浏览器检查中，我找不到为元素编写的样式表。我想这是关于 CSS 渲染的顺序。任何建议将不胜感激。

<template>
  <div>
    <div class="item">
      <label for="content">Contents</label>
      <textarea name="content" id="content" v-model="mdtext"></textarea>
    </div>
    <div id="preview"></div>
  </div>
</template>

<script>
import marked from 'marked'

export default 
  data () 
    return 
      mdtext: ''
    
  ,
  watch: 
    mdtext: function () 
      document.getElementById('preview').innerHTML = marked(this.mdtext)
    
  

</script>

<style scoped>
...
#preview p
  width: 100%;
  word-break: break-all;
  word-wrap: break-word;

...
</style>

【问题讨论】：

请将 Vue 添加到与 Vue.js 相关的类别列表中

可以分享一下开发工具中html元素位置的截图吗？

它没有注册，因为p标签没有收到dom生成的确切后缀

这可能不是注入 html 的确切方式

还要检查p标签样式添加的地方

【参考方案1】：

您正在使用 scoped css，这使得 Vue 也将 data-v- 属性添加到 p。但是，生成的 <p> 没有相同的 data-v- 属性，这就是它不起作用的原因。 您可以使用深度选择器轻松修复它：

<style scoped>
#preview >>> p 


</style>

参考：https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors