<h3 dir="auto">Version</h3>
<p dir="auto">2.5.13</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://codepen.io/anon/pen/oEGjqO" rel="nofollow">https://codepen.io/anon/pen/oEGjqO</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">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.</p>
<p dir="auto">Example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;template&gt;
&lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
&lt;/template&gt;

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

&lt;script&gt;
export default{
created(){
  const item = document.querySelector(".item");
  item.innerHTML = "&lt;div class="box"&gt;&lt;/div&gt;";
}
&lt;/script&gt;
&lt;style scoped&gt;
.box{
width:300px;
height:300px;
background:red
}
&lt;/style&gt;
</code></pre></div>
<p dir="auto">Intended or a bug?</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">We expect the css to be applied</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">It's not being applied</p>
<p dir="auto">When using scoped CSS the styles and the elements are given data- attributes. But when content is added Dynamically it won't have those data- attributes. So the styles are not applying to the dynamic content.</p>
<p dir="auto">I think it's better to add a data- attribute to the root element of the template and add the styles as the children of that attribute instead of adding attributes to individual elements..</p>