What problem does this feature solve?

It's hard to create clean components and styles when you've got basically just scoped or completely global, without any middle ground.

We recently created some complex, nested components for a shared-state multiplayer game interface. We abstracted it in a way that would enable us to keep the complicated functionality in reusable components, while the style of the UI and the contents of cards could be customized from a higher level view component. We were able to support the data and functionality of this pretty easily with slots and slotProps. But when it came time to style things, it got a lot harder.

Another use case I've run into in the past was redesigning an existing app that had global CSS files set in main.js. I wanted to be able to work on my new pages and components in the same codebase, without having to worry about inheritance issues with the old styles and without breaking every other page. So I tried to figure out how I could take the CSS files out of main, and include them on the highest level component of the old app, so I could create a new high level component with different CSS files, or just scoped styles in each component. I was pretty new to Vue at the time, but I couldn't find a way to do this.

What does the proposed API look like?

For both of my use cases, a deep attribute on the style tag in single-file components would have addressed this. It could behave exactly like the :deep and :slotted selectors work in CSS, except this would enable both style blocks and external stylesheets to have their scope defined and it would be a cleaner way to set these styles because there would be less issues with CSS preprocessors struggling with custom selectors.

<style lang="scss" scoped></style>
<style lang="scss" deep></style>
<style lang="scss" slotted></style>