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

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?

@El_Matella I've edited the question with the template and included some new insights. — Michael Hays, Jun 22 '17 at 21:53
Can you possibly add the code of D3 generating the child divs as well? — aug, Jun 22 '17 at 21:58
@aug I've rearranged the question to include the entire `.vue` file including the D3 code. — Michael Hays, Jun 22 '17 at 22:15

score 3 · Accepted Answer · answered Jun 22 '17 at 22:02

3

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

answered Jun 22 '17 at 22:02

Hammerbot

15,696
9
61
103

1

Great workaround, thanks! This completely works for the case in my question. I ended up having to use `.chart /deep/ div {...` to make it work for SCSS. I've rephrased the question to focus on how to bind `data-v-xxxxxxxx` to generated elements, but if there isn't a solution posted here by tomorrow then I'll accept this answer. – Michael Hays Jun 22 '17 at 22:23

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

1 Answers1

Linked