Here is the code snippet of my component:
<template>
<div id="something" class="card">
</div>
</template>
const height = 200;
const width = 200;
let graph = d3
.select('#something')
.append('svg')
.attr('class', 'chart-container')
.attr('height', height)
.attr('width', width);
<style lang="scss" scoped>
.chart-container {
background-color: aquamarine;
}
</style>
Although the svg element has the class .chart-container assigned to it, no styling seems to be applied.
https://i.stack.imgur.com/JFNEP.png
However, when I remove the scoped attribute from <style lang="scss">, the styling works as intended.
https://i.stack.imgur.com/Fwtqm.png
Why does this behavior occur?