Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#eNqdUstOwzAQ/JWVLwGJ2HDgEkJU1B9AKjfCIQ+ncYkf8jpFVZV/Z520BaGeuHk965nZWR/Zi3N8P0qWsRwbr1wAlGF0RWmUdtYHOIKXHUzQeashodbkAq17NbQngIu5ilzUkIuFjGioCFK7oQqSKoC8Vfvi/bXy0oQPeOsVgmqsAeztSGx5XRgbclEXUEtoFdLLg2wzyNFVBpqhQnwuWa3S2tqAwVcu7dQwlKwgUWop4Ga92QDRDrL6VGa7GFy8NpacG1K+zUX0MRtaIEFFLi5W2R1bpkx15fgOraGIjrG/PAFYsgzmm3hHc8e6ZH0IDjMhsGtiGDvk1m8FnbgfTVBacok6rb39QumJuGSRYirNRJKXDOM+rsQ241dS+2dU5xB+zT0vDMNhkICNdbKd1VenjSfn6ZrWkPdWDmrvuZFBGKfFj0z0hqsH/sjvRWdN+AtxrQxvEJOn+a9EuYJN38zn5IM=

Steps to reproduce

It can be seen that there are two lines in this page. The first line corresponds the App itself (parent) and the second one corresponds to the Child component.

In the child component I imported a CSS style (Bootstrap) that aims to be scoped to it but it is not working as intended since it leaks to the parent (App.vue).

What is expected?

The imported CSS styles should not affected the styles of any parent component. This first icon should not be displayed, only the second one should be displayed.

What is actually happening?

The imported CSS styles are affecting the styles of parent component. Both icons are being displayed.

System Info

No response

Any additional comments?

No response

the build process does not process CSS imported from a CDN at runtime, it can only process CSS that's available locally during build.