DEV Community

HandsomeTan
HandsomeTan

Posted on

Instructions on using CSS2(3)DObject with 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>
Enter fullscreen mode Exit fullscreen mode

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

<style scoped>
.className[data-v-hash] {
...
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more