Using <title> tags in layouts breaks

Describe the bug

Also described here

If you put a title tag in a in your root +layout (as a generic handler) and then put additional ones in sub-layouts / sub-pages / ..., the one further down will display for a second and then be overwritten by the parent.

Reproduction

Create +layout.svelte with a tag</li> <li>Create child/+page.svelte with a <title> tag</li> <li>Child's <title> tag is overwritten by that of its parent</li> </ol> <h3>Logs</h3> <p><em>No response</em></p> <h3>System Info</h3> <pre><code class="language-shell">System: OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish) CPU: (6) x64 AMD Ryzen 5 1600 Six-Core Processor Memory: 9.39 GB / 11.65 GB Container: Yes Shell: 5.1.16 - /bin/bash Binaries: Node: 20.3.1 - ~/.nvm/versions/node/v20.3.1/bin/node npm: 9.6.7 - ~/.nvm/versions/node/v20.3.1/bin/npm npmPackages: svelte: ^4.0.0 => 4.0.0</code></pre> <h3>Severity</h3> <p>annoyance</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/n0n3br"><img src="https://avatars.githubusercontent.com/u/371808?v=4" />n0n3br</a> commented <strong> 7 months ago</strong> </div> <div class="markdown-body"> <p>I tried using the svelte:head component in +page.svelte and then a second one in about/+page.svelte and it works. Maybe that's how it's suposed to be used. On the layout we are suposed to put only elements that are common to all views in the page. In this case the title would not fit this requirement.</p> <p>link -> <a href="https://stackblitz.com/edit/sveltejs-kit-template-default-seampc?file=src%2Froutes%2F%2Bpage.svelte">stackblitz</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/lc-guy"><img src="https://avatars.githubusercontent.com/u/5222114?v=4" />lc-guy</a> commented <strong> 7 months ago</strong> </div> <div class="markdown-body"> <blockquote> <p>I tried using the svelte:head component in +page.svelte and then a second one in about/+page.svelte and it works. Maybe that's how it's suposed to be used. On the layout we are suposed to put only elements that are common to all views in the page. In this case the title would not fit this requirement.</p> <p>link -> <a href="https://stackblitz.com/edit/sveltejs-kit-template-default-seampc?file=src%2Froutes%2F%2Bpage.svelte">stackblitz</a></p> </blockquote> <p>This works but makes it unreasonably hard to put in a default that gets overwritten on a case-by-case basis. One has to put the common head tag in each and every route (and subroute) to make it work.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jhwheeler"><img src="https://avatars.githubusercontent.com/u/23257850?v=4" />jhwheeler</a> commented <strong> 1 month ago</strong> </div> <div class="markdown-body"> <p>The solution from <a href="https://github.com/sveltejs/kit/issues/1540#issuecomment-2029016082">https://github.com/sveltejs/kit/issues/1540#issuecomment-2029016082</a> works well and is easily scalable.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

sveltejs / svelte

Using <title> tags in layouts breaks #10223

Describe the bug

Reproduction