fix: better handle hydration of script/style elements

[trueadm]

Fixes #14624. We can better handle hydration of <script> and <style> elements when used with <svelte:element> and avoid the mismatch errors people are encountering.

[changeset-bot]

🦋 Changeset detected

Latest commit: b710030

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Playground

pnpm add https://pkg.pr.new/svelte@14669

[dummdidumm]

While this fixes this case, I'm wondering how much more work it would be to instead generally not add hydration markers inside of blocks that only consist of a single child.

E.g. if you have this:

<div>
  {@render children()}
</div>

We're outputting this

<div>children conntent<!></div>

But we could output this instead

<div>children conntent</div>

[trueadm]

While this fixes this case, I'm wondering how much more work it would be to instead generally not add hydration markers inside of blocks that only consist of a single child.

E.g. if you have this:

<div>
  {@render children()}
</div>

We're outputting this

<div>children conntent<!></div>

But we could output this instead

<div>children conntent</div>

I think this is actually different from that. In this case, there is no hydration marker, but $.append always does hydrate_next when hydrating.

[Rich-Harris]

I don't love the fact that we're adding logic to every hydrate_next call — it feels like we should handle this special case inside the <svelte:element> code. Also, it's not just <script> and <style> that get this treatment, it's also <textarea> and <title>. Opened #14683 as an alternative