Vue项目自定义iframe组件内嵌套子组件CSS样式加载异常求助

问题诱因 #

你遇到的样式不生效问题核心原因是：Vue 默认会将组件内<style>标签的内容，通过动态注入<style>标签的方式插入到父页面的<head>节点中，而你封装的webpage组件是将内容渲染到独立的iframe文档内，iframe和父页面的DOM、样式上下文完全隔离，自然无法读取父页面注入的组件样式。偶尔生效大概率是开发环境热更新、样式注入时序巧合导致的偶现异常，不属于稳定可复现的正常逻辑。

可行解决方案 #

• 方案1：直接复用现有css prop传参
  你已经在webpage组件中预留了css参数用于向iframe注入样式，直接将bloc组件的样式内容作为参数传入即可：

<!-- app.vue -->
<template>
  <Webpage :css="blocStyle">
    <component :is="name"></component>
  </Webpage>
</template>
<script>
import bloc from "@/components/Bloc";
import Webpage from "@/components/Webpage";
// 直接提取bloc组件的样式内容，也可以单独写在变量里
const blocStyle = `.bloc {
  background-color: blue;
  padding: 20px;
}`
export default {
  components: {
    bloc,
    Webpage,
  },
  data() {
    return {
      blocStyle
    }
  },
  computed: {
    name() {
      return "bloc";
    },
  },
};
</script>

• 方案2：自动同步父页面样式到iframe
  如果要批量处理多个组件的样式，可改造webpage组件的renderChildren方法，将父页面所有的样式标签同步复制到iframe的<head>中，注意做去重处理避免重复插入：

// 在webpage.vue的renderChildren方法中，插入style的逻辑替换为：
const parentStyles = document.querySelectorAll('style, link[rel="stylesheet"]')
parentStyles.forEach(node => {
  const cloneNode = node.cloneNode(true)
  // 给克隆的节点加个标记，避免重复插入
  cloneNode.setAttribute('data-iframe-sync', '1')
  if (!head.querySelector(`[data-iframe-sync][href="${cloneNode.href}"]`) && !head.querySelector(`[data-iframe-sync][data-v-uid="${cloneNode.getAttribute('data-v-uid')}"]`)) {
    head.appendChild(cloneNode)
  }
})
// 保留你原有的自定义css注入逻辑
if (this.$props.css) {
  let style = this.$el.contentDocument.createElement("style");
  style.textContent = this.$props.css;
  head.appendChild(style);
}

• 方案3：组件样式改为内联写法
  如果是小型组件，直接将样式写在元素的style属性中，不需要依赖外部样式表，自然可以在iframe内正常生效。

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