Dynamic title tag breaks HTML with orphaned text and missing <body> element #1105
Description
Astro Info
Astro v5.13.2
Node v18.20.8
System Linux (x64)
Package Manager npm
Output static
Adapter none
Integrations none
If this issue only occurs in one browser, which browser is a problem?
No response
Describe the Bug
I'm trying to add "DEVMODE" to the <title> element so I don't mistake the browser tab containing my live site for my development server. When I do something like this:
<title>{Astro.url.hostname === 'localhost' ? "DEVMODE" : ""}Astro Title</title>...it winds up breaking the page. The <title> element ONLY contains "DEVMODE", and the remaining text in the template's title tag winds up as an orphaned text node directly after the closing </head> tag. The <body> element appears to disappear completely in the generated HTML. You can see this happen on the StackBlitz reproduction if you open the preview pane in a new tab and view source.
Adding a space after the closing } resolves it, that is, the <title> element renders with "DEVMODE Astro Title", and the <body> element is rendered normally. If the ternary evaluates false using the workaround, a space is added before "Astro Title".
The bug doesn't appear to affect elements in <body>, so I think <head> might be special, but I haven't done extensive testing to isolate it.
Bug showing: Note the orphaned text "Astro Title" in the preview pane:
Workaround: Add a space after the closing } in the <title> tag before the text portion:
What's the expected result?
I expect whitespace (or lack thereof) after the closing } to be preserved, and not allow the static text to escape the <title> tag or break the layout by removing the <body> element.
Link to Minimal Reproducible Example
https://stackblitz.com/edit/github-gap8avdk?file=src%2Fpages%2Findex.astro
Participation
- I am willing to submit a pull request for this issue.