Vue Single File Component binding data-v-xxxxxxxx to generated elements - html

Question

I'm building a Vue component as a Single File Component:
<template>
<div class="chart"></div>
</template>
<script>
import * as d3 from 'd3';
export default {
data() {
return {
data: [4, 8, 15, 16, 23, 42],
};
},
mounted() {
d3.select('.chart')
.selectAll('div')
.data(this.data)
.enter()
.append('div')
.style('width', d => `${10 * d}px`)
.text(d => d);
},
};
</script>
<style lang="scss" scoped>
.chart {
div {
background-color: steelblue;
color: white;
font: 10px sans-serif;
margin: 1px;
padding: 3px;
text-align: right;
}
}
</style>
After processing with webpack, the CSS is rendered like so:
<style type="text/css">
.chart div[data-v-xxxxxxxx] {
background-color: steelblue;
color: white;
font: 10px sans-serif;
margin: 1px;
padding: 3px;
text-align: right;
}
</style>
But the HTML shows up as:
<div data-v-xxxxxxxx class="chart">
<div style="width: 40px;">4</div>
<div style="width: 80px;">8</div>
<div style="width: 150px;">15</div>
<div style="width: 160px;">16</div>
<div style="width: 230px;">23</div>
<div style="width: 420px;">42</div>
</div>
I'm using D3 to generate the child <div>s. I've found that data-v-xxxxxxxx isn't bound to generated elements. If I include the child <div>s in the original template rather than generating them, they each have the data-v-xxxxxxxx attribute and the styles apply as expected
I would think that any descendant of the root node, whether included in the template or generated, should be bound to the rules of the scoped CSS. Is there any way to force this?

Answer 1

New version of vue-loader (from version 12.2.0) allows you to use "deep scoped" css. You need to use it that way:
<style scoped> now support "deep" selectors that can affect child
components using the >>> combinator:
.foo >>> .bar { color: red; } will be compiled into:
.foo[data-v-xxxxxxx] .bar { color: red; }
More informations on the release page of vue-loader