组件应答器的 CSS 未加载到特定组件内

Question

我在加载我的 bloc 组件的 css 时遇到问题。

网页组件允许创建 iframe 并在其中轻松设置一些内容。

它正确加载了模板和脚本标签，但不是 css（它不加载）。

有时有效，但大多数时候无效。

我以为是组件加载有问题，但不是。

如果我在渲染“网页”组件之前或之后加载组件：它不会加载。

我尝试过将自动导入为 true 和 after 为 false，但它没有解决任何问题。

我有 2 个组件：网页和块。

bloc.vue

<template>
  <div class="bloc">
    <p>Le texte</p>
  </div>
</template>

<style>
.bloc {
  background-color: blue;
  padding: 20px;
}
</style>

webpage.vue

<script>
import Vue from "vue";
export default {
  props: {
    css: {
      type: String,
      required: false,
    },
  },
  data() {
    return {
      load: false,
    };
  },
  render(h) {
    return h("iframe", {
      on: { load: this.renderChildren },
    });
  },
  beforeUpdate() {
    //freezing to prevent unnessessary Reactifiation of vNodes
    this.iApp.children = Object.freeze(this.$slots.default);
  },
  mounted() {
    if (!this.load) this.renderChildren();
  },
  methods: {
    // https://forum.vuejs.org/t/render-inside-iframe/6419/12
    renderChildren() {
      this.load = true;
      const children = this.$slots.default;
      const head = this.$el.contentDocument.head;
      const body = this.$el.contentDocument.body;

      let style = this.$el.contentDocument.createElement("style");
      style.textContent += this.$props.css;
      head.appendChild(style);

      const iApp = new Vue({
        name: "iApp",
        // freezing to prevent unnessessary Reactifiation of vNodes
        data: { children: Object.freeze(children) },
        render(h) {
          return h("body", this.children);
        },
      });

      this.iApp = iApp; // cache instance for later updates
      this.iApp.$mount(body); // mount into iframe
    },
  },
};
</script>

app.vue

<template>
  <Webpage>
    <component :is="name"></component>
  </Webpage>
</template>

<script>
import bloc from "@/components/Bloc";
import Webpage from "@/components/Webpage";
export default {
  components: {
    bloc,
    Webpage,
  },
  computed: {
    name() {
      return "bloc";
    },
  },
};
</script>

你知道这可能来自哪里吗？

密码框：https://codesandbox.io/s/error-style-component-import-1t1hs?file=/pages/index.vue

谢谢。

Answer 1

可能Webpage 组件会覆盖它。
尝试将您的样式移动到索引和<Webpage class="bloc">