search

withastro / astro

The web framework for content-driven websites. ⭐️ Star to support our work!
https://astro.build
Other
46.79k stars 2.48k forks source link

Improper styles usage (nested?) #10968

Closed Grohotun closed 6 months ago

Grohotun commented 6 months ago

Astro Info

Astro                    v4.7.1
Node                     v18.20.2
System                   macOS (arm64)
Package Manager          yarn
Output                   static
Adapter                  none
Integrations             @astrojs/sitemap

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

If image is loaded by external component you can't simply apply scoped styles, only global styles are working (or add styles directly into loaded component)

What's the expected result?

styles to be applied from main.astro

Link to Minimal Reproducible Example

https://stackblitz.com/~/github.com/Grohotun/withastro-astro-8gguzy?file=src/pages/index.astro

Participation

bluwy commented 6 months ago

You need to pass along the data-astro-cid-* prop in order for the scoped styles to work on the element. If you're using scopeStyleStrategy: 'class', you need to rename cl as class for the scoped class to properly apply to the class.