Set content of vue 3 single file components' style tag

I need to present some random/dynamic html data in my project that might contain style tags, by default vue.js doesn't allow style tags in the template to avoid messing styles that is a very good option. To make my project work I tried some runtime-component projects on github but they doesn't accept css styles in the way I need, so I came up with the solution of creating my own runtime component with accepting css styles data. What I want in code is sth like:

<template>
  <div v-html="template"></div>
</template>

<script>
export default {
  name: "DynamicTemplate",
  props: {template: String, style: String}
}
</script>

<style scoped>
// style data goes here
</style>

Any alternative working solution is welcome too :)

I tried v-html and v-text attributes on the component style tag (without any results) and also using css @import statement with base64 encoded css codes (got some errors like Cannot read properties of undefined), but none of them worked :(

Solution

You can encapsulate the data inside the style tags inside the component tag provided by vue in this manner ->

  <component :is="'style'"> .test-class { color: red; }....Your style data </component>

An example of the same can be found in this project I created

https://codesandbox.io/s/interesting-dewdney-id9erd?file=/src/components/HelloWorld.vue

Edit 1 => After reading the comment as I think the CSS scope compilation is done during the build process not during runtime thus having css at runtime won't scope it an alternate solution for this can be embedding your HTML code inside an iframe and passing your code to the iframe using the srcdoc attribute.An example of the same is given below

https://codesandbox.io/s/currying-cherry-zzv3wk?file=/src/components/HelloWorld.vue

<template>
  <iframe style="width: 100vw; height: 80vh" :srcdoc="htmlCssCode"></iframe>
</template>

<script>
export default {
  data() {
    return {
      htmlCssCode: `Your Html code here`

<html>