Vue Single File Component bind data-v-xxxxxxxx to generated items
I am creating 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 this:
<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 is rendered like:
<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 am using D3 to generate child <div>
s. I found I was data-v-xxxxxxxx
not tied to the generated elements. If I include the child <div>
in the original template rather than generating it, each has an attribute data-v-xxxxxxxx
and the styles are applied as expected
I would think that any descendant of the root node, whether included in the template or generated, should be bound to CSS rules. Is there a way to force this?
source to share
The new version vue-loader
(from version 12.2.0) allows deep scoping css. You should use it this way:
<style scoped>
now support deep selectors, which can affect components using a combinator>>>
:
.foo >>> .bar { color: red; }
will compile to:
.foo[data-v-xxxxxxx] .bar { color: red; }
More information on the release page vue-loader
source to share