Стили с областью действия неожиданно просачиваются в рекурсивный дочерний элемент во Vue.JS ⇐ CSS

[Anonymous]

App.vue

Код: Выделить всё

import Comp from './Comp.vue';

const items = [
{
name: 'parent',
hasBorder: true,
children: [
{
name: 'child',
hasBorder: false,
children: []
}
]

}
]

< /code>
comp.vue


[list]
[*]
{{ item.name }}


[/list]




import { defineProps } from 'vue';

const { items, hasBorder } = defineProps();




.comp {
margin-left: 1rem;
padding: 3rem;
}

li {
outline: 1px dotted grey;
}

[data-border] li  {
border-left: 5px solid red;;
}

.class-border li {
border-top: 5px solid blue;
}

< /code>
data-border

и класс-график применяются только к родителю, но соответствующие стили протекают в ребенка. Что я делаю не так? .sstatic.net/ojpx4yfa.png "/>

Подробнее здесь: https://stackoverflow.com/questions/793 ... -in-vue-js