search

withastro / astro

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

Astro islands inject invalid HTML #10308

Closed TheDutchCoder closed 6 months ago

TheDutchCoder commented 6 months ago

Astro Info

Astro                    v4.4.9
Node                     v20.7.0
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/vue

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

No response

Describe the Bug

Hi there!

When you use an Astro island, it will inject a <style> tag in the body, which is not considered valid HTML. It should appear in the head directly.

Note: it's invalid after npm run build, not just in dev mode.

results from the repro:

image

What's the expected result?

The <style> tag to appear in the head instead.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-qvmcwt

Participation

Princesseuh commented 6 months ago

This is a contentious point on the web where some versions of the spec allowed it and other didn't. Funnily enough, the latest version of the W3C spec allowed this. However, regardless of what the spec says, a loooooooot of websites, including massively popular ones do it. Most likely that at this point the spec should allow it, but oh well.

I think we could maybe fix this particular one in Astro, but I generally would not worry about this.

TheDutchCoder commented 6 months ago

I understand the reasoning. I don't think the W3C spec allows it, unless it contains a scoped attribute.

Regardless, it's a good practice to hoist it to the head instead so it's discoverable before the content part of the DOM parses.

Not saying it's a huge issue btw 😉

matthewp commented 6 months ago

Passing the w3c markup validator is not a goal of this project. Having <style> tags inside the body is supported by every web browser and has been for a very long time. In general the validator gives outdated advice and I'd suggest not using it. You'll find that most big websites fail its validation, despite working just fine in actual browsers. Closing because we won't change this behavior and do it for a reason (to prevent adding styles unless they are necessary).