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

Posted 2023-02-16

【中文标题】组件应答器的 CSS 未加载到特定组件内

【英文标题】：CSS of component balise doesn't load inside spefic component

【发布时间】：2021-12-26 03:07:50

【问题描述】：

我在加载我的 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

谢谢。

【参考方案1】：

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

【讨论】：

我不会在网页组件上设置bloc组件的样式。我希望他的风格适用于正确的组件：bloc。