I’m doing a small side project and I noticed something weird in styling using scoped css. I have two pages with similar tables, I need to style them a bit different. For quite some time I’ve been fighting with issue where css below yielded 2 different results. One was correct (112px) the other way off (338.5px).

table thead tr td:last-child {
  width: 112px;
}

And then I noticed… My browser (chrome) had access to both scoped (table thead tr th[data-v-9c4e45ac]:last-child) and raw CSS. The latter from the file where everything is ok is messing up the former. This never happened to me before, and I don’t know how to fix it. The source of scoped one is (according to chrome) <style> and the raw one comes from generated css file. Why are there both? How to change that?

A bit file structure for clarity:

manufacturers.vue (this generates manufacturers.css file that messes up next file)

<template><!-- .. --></template>
<script> /* ... */ </script>
<style scoped>
table thead tr td:last-child {
  width: 112px;
}

table thead tr th:not(.name-column) {
  width: 7rem; /* this is applied to both files, and it shouldn't */
}

deviceModels.vue (this also generates a css file, but so far I had no issues with it)

table thead tr td:last-child {
  width: 112px;
}

Adding !important did not help.