Instructions on using CSS2(3)DObject with Vue

#threejs #vue

Today I used CSS2DObject in a Vue project, but css styles didn't work on this CSS2DObject. After searching for some information, I found this problem is casued by scoped syntax sugar. Let's review the essence of scoped syntax sugar:

<style scoped>
.className {
...
}
</style>

after compilation, the codes above can be displayed as follows:

<style scoped>
.className[data-v-hash] {
...
}

and all elements in vue component have added data-v-hash attribute, except for elements we created by ourselves, so css styles with scoped syntax sugar do not work on these elements.