When rendering vue on a page inside a frame, the style tag is ignored #8443

duyo-son · 2023-05-27T10:03:03Z

duyo-son
May 27, 2023

I'm trying to render vue on a page inside a frame(frame structure can not change)
Rendering succeeded, but there is a problem that styles are not applied

I wrote the sample code to reproduce below, can you tell me what is the problem?

gitRepo

code

index.html
Rendering vue inside a frame(#frm)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <!-- not this one -->
    <div id="app"></div>
    <iframe src="framed.html" frameborder="1" width="50%" height="400px" id="frm"></iframe>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

main.ts
Renders inside a Frame, but styles are not applied

import { createApp } from 'vue'
import App from './App.vue'


// bad (style tag not working)
let element = (document.getElementById('frm') as any)?.contentWindow.document.getElementById('app');
createApp(App).mount(element)


// good but I don't want to use this
createApp(App).mount('#app')

App.vue


<template>
  <div class="css-test">
    show me red background
  </div>
</template>

<style scoped>
/** this is test css */
.css-test {
  background-color: red !important;
  width: 100%;
  height: 100%;
}
</style>

result

Styles are applied to vues that are rendered outside the frame, but styles are not applied to vues that are rendered inside the frame.
*vue rendering outside the frame is tested

result

could you please tell me what is the problem and how can I apply styles to vue inside a frame?

duyo-son · 2023-05-28T02:13:14Z

duyo-son
May 28, 2023
Author

temporary solution

let frame = document.getElementById('frm') as any;
let element = frame.contentWindow.document.getElementById('app');
createApp(App).mount(element)

// solution
document.querySelectorAll('style').forEach((style) => {
    frame.contentWindow.document.head.appendChild(style.cloneNode(true));
});

2 replies

McSneaky Mar 20, 2025

Did you ever figure out non-temporary solution?

Does Vue 3 accept some config value? I couldn't find it anywhere

duyo-son Mar 21, 2025
Author

No, I haven't.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue

When rendering vue on a page inside a frame, the style tag is ignored #8443

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Vue

When rendering vue on a page inside a frame, the style tag is ignored #8443

Uh oh!

duyo-son May 27, 2023

code

result

Replies: 1 comment · 2 replies

Uh oh!

Uh oh!

duyo-son May 28, 2023 Author

Uh oh!

McSneaky Mar 20, 2025

Uh oh!

duyo-son Mar 21, 2025 Author

duyo-son
May 27, 2023

Replies: 1 comment 2 replies

duyo-son
May 28, 2023
Author

duyo-son Mar 21, 2025
Author