Vue single-file components and the scoped style caveat

<style scoped> adds a data attribute to elements in the component and to the root of any child, which means a rule can leak into a child’s top-level element and nowhere else.

<style scoped>
.list { padding: 0; }              /* this component only */

.list >>> .child-item { color: red; }   /* deep selector, reaches inside */
</style>

The deep combinator exists because scoping is otherwise absolute, and it is spelled three ways depending on the preprocessor — >>> in plain CSS, /deep/ or ::v-deep when a preprocessor eats the first form. Styling a child component’s internals is a coupling worth being deliberate about; more often the right answer is a prop or a class the child accepts. The partial leak to the child’s root element is a genuine surprise and reads as a scoping bug the first time it helps.