使用v-html将textarea内容作为CSS规则注入页面时遇到Vue编译错误如何解决

报错原因 #

Vue 客户端组件模板编译器默认会过滤 <style>、<script> 这类自带副作用的特殊标签，禁止在模板内直接通过指令动态生成这类标签的内容，目的是避免不可控的全局样式/脚本污染，因此你在模板内直接写 <style v-html="css"> 会触发编译错误。 #

解决方案 #

1. 修正 textarea 的绑定逻辑 #

你原写法中 v-bind="css" 是错误的无参数属性绑定，textarea 作为表单元素需要用 v-model 实现输入内容与响应式变量的双向绑定：

<textarea v-model="customCss" placeholder="请输入自定义CSS规则"></textarea>

2. 通过 JS 动态注入用户输入的CSS #

不要在模板中直接写 style 标签，通过监听 CSS 变量的变化，动态创建/更新 style 元素插入到页面 head 中即可：

Vue3 组合式API 实现示例

<script setup>
import { ref, watch, onUnmounted } from 'vue'

// 存储用户输入的CSS内容
const customCss = ref('')
// 缓存动态创建的style元素实例
let customStyleEl = null

// 监听CSS内容变化，实时更新样式
watch(customCss, (newCss) => {
  // 首次更新时创建style元素
  if (!customStyleEl) {
    customStyleEl = document.createElement('style')
    // 加自定义标识方便后续区分管理
    customStyleEl.setAttribute('data-wysiwyg-style', '')
    document.head.appendChild(customStyleEl)
  }
  // 替换style内容
  customStyleEl.textContent = newCss
}, { immediate: true })

// 组件卸载时清理插入的style元素，避免样式残留
onUnmounted(() => {
  if (customStyleEl) {
    document.head.removeChild(customStyleEl)
    customStyleEl = null
  }
})
</script>

Vue2 选项式API 实现示例

<script>
export default {
  data() {
    return {
      customCss: ''
    }
  },
  watch: {
    customCss: {
      immediate: true,
      handler(newCss) {
        if (!this.$customStyleEl) {
          this.$customStyleEl = document.createElement('style')
          this.$customStyleEl.setAttribute('data-wysiwyg-style', '')
          document.head.appendChild(this.$customStyleEl)
        }
        this.$customStyleEl.textContent = newCss
      }
    }
  },
  beforeDestroy() {
    if (this.$customStyleEl) {
      document.head.removeChild(this.$customStyleEl)
      this.$customStyleEl = null
    }
  }
}
</script>

可选优化项 #

• 安全防护：如果是面向公开用户的产品，需要对用户输入的CSS做过滤，拦截@import、expression、url(javascript:)等恶意语法，避免安全风险
• 样式隔离：如果需要用户CSS仅作用于WYSIWYG预览区域，可给预览容器添加唯一类名，注入CSS时自动给所有用户编写的选择器添加该类名前缀，避免污染全局页面样式

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