Why do Vue scoped styles affect recursive child components unexpectedly?

Link to Code Sandbox

I noticed that the child element is rendered with a border even though it shouldn’t have one. The style intended for the parent is leaking into the child. The only workaround seems to be changing the selector from [data-border] li to a stricter version [data-border] > ul > li. However, my understanding was that scoped styles should prevent this kind of leakage.

Below is the relevant code:

App.vue

VUECopied
<template>
  <Comp :items="items" :has-border="true"></Comp>
</template>

<script setup>
import Comp from './Comp.vue';

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

Comp.vue

VUECopied
<template>
  <div
    v-if="items && items.length"
    class="comp"
    :class="{ 'class-border': hasBorder }"
    :data-border="hasBorder ? '' : null"
  >
    <ul v-for="(item, index) in items" :key="index">
      <li>
        {{ item.name }}
        <Comp :items="item.children"></Comp>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from "vue";

const { items, hasBorder } = defineProps<{
  items?: any[];
  hasBorder?: boolean;
}>();
</script>

<style scoped>
.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;
}
</style>

In this example, both the data-border attribute and the class-border class are only applied to the parent, yet their corresponding styles are cascading into the child component’s list items. What might I be doing wrong?