What does `scoped` CSS do in a Vue SFC, and how is it implemented?

<style scoped> restricts CSS rules to only apply to the current component's template, preventing style leakage into child or sibling components. Under the hood, Vue's compiler adds a unique data-v-xxxxxx attribute to every element in the component's rendered template, and rewrites CSS selectors to include a matching attribute selector, e.g. .button[data-v-7ba5bd90].

Caveat: styles applied to a child component's root element from the parent's scoped styles do still work (limited leakage) because the child's root element receives both the parent's and its own scope attributes. To deliberately target child elements, use the :deep() pseudo-class.