Scoped CSS not applied for programmatically added elements

[jonasgroendahl]

Version

2.5.13

Reproduction link

https://codepen.io/anon/pen/oEGjqO

Steps to reproduce

In Vue if you add elements programmatically, the scoped css is not applied to those elements inside the given .vue file. If you add the styling in the style tag or remove the scoped attribute, it will work.

Example:

<template>
<div class="item"></div>
</template>

<script>
export default{
created(){
  const item = document.querySelector(".item");
  item.innerHTML = "<div class="box"></div>";
}
</script>
<style scoped>
.box{
width:300px;
height:300px;
background:red
}
</style>

Intended or a bug?

What is expected?

We expect the css to be applied

What is actually happening?

It's not being applied

[ktsn]

Duplicate of vuejs/vue-loader#559 and vuejs/vue-loader#749.

[dharmatv]

<script> export default{ created(){ var style = document.createElement('style'); //style.type = 'text/css'; //style.id = name; style.setAttribute("scoped", ""); style.innerHTML = content; //dynamic generated styles document.getElementsByTagName('head')[0].appendChild(style); } </script>

my problem is also same like this but small difference problem i have same issue, but i am trying a lot with the /deep/ and also >>> but still i didn't get, is there any another solution to this one

Thanks