Svelte parses HTML all wrongについてまとめる

<script>
  import { onMount } from 'svelte';

  let div;
	
  onMount(() => {
    console.log(div.textContent);
  });
</script>

<div bind:this={div} />hello!

1番目のケースは'hello!' がログに記録されて、2番目のケースでは、空の文字列がログに記録されるようになる

yamanoku

Prettierでは現在空要素に対してSelf-closingを自動的に付与するようになっており、そのこと自体を解除するようなオプションは現在設定されていない

yamanoku

Svelteの既存の振る舞いを変える可能性があることに賛同しない人もいるが、Rich曰く曖昧な状態になっているのをどうにかしたいと言っている

現在 <div /> を含むHTMLをSvelteコンポーネントにコピーペーストしたり、その逆をしたりすると、まったく異なる要素ツリーになってしまう

そうした状況は非常に稀なことなので助けられているが、挙動が異なっている事実は何も変わっていない

<div />こんにちは

上記のようなコードの解釈は人によって異なるので、<div>こんにちは</div>か<div></div>こんにちはになるかをSvelteにおいて決めたい

ref: https://github.com/sveltejs/svelte/issues/11052#issuecomment-2035279039

yamanoku

Richが真に問題として上げていることは、人々が不完全なHTMLをSvelteに貼り付けて異なる動作を経験することよりも、逆のことを上げている。

つまり、有効なSvelteのスニペットをHTMLのコンテキストに持っていき、そこで壊れる経験をする人々のことを懸念している

Svelteを使ってHTMLの動作方法を理解した人々が、他のフレームワーク（またはフレームワークを全く使用しない）を使用しようとすると、解釈が異なって壊れることも意味する

今のままのSvelteを提供することは人々に壊れたコードを書いていくことにつながるので、非常に悪いことだと考えている

ref: https://github.com/sveltejs/svelte/issues/11052#issuecomment-2035357540

yamanoku

いくつかコミュニティ内から質問が出た中でRichが明らかにしたいこととして、今回の件はHTML 要素にのみ適用されることを指している。他の名前空間（SVGなど）では、Self-closing tagは許可されている。その延長として、Svelte コンポーネント自体もSelf-closing tag持ち続ける、と述べている

ref: https://github.com/sveltejs/svelte/issues/11052#issuecomment-2035519344

yamanoku

Richが警告が出るように修正PRを出していた。npx svelte-migrate self-closing-tags でマイグレーションできそう。

このスクラップは2024/04/24にクローズされました