vue のwarning `This can cause hydration errors or potentially disrupt future functionality.`について

最近ライブラリの更新を行なったのですが、それを契機に開発サーバ起動時に以下のようなwarningが出力されるようになりました。

```
[23:29:02]  WARN  warning: <tr> cannot be child of <table>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.
    28 |          </td>
    29 |        </tr>
    30 |        <tr data-v-inspector="components/example/Review.vue:30:7">
       |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    31 |          <th scope="row" class="text-left" data-v-inspector="components/example/Review.vue:31:9">
       |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    32 |            {{ $t('total') }}
       |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    33 |          </th>
       |  ^^^^^^^^^^^^^
    34 |          <td data-v-inspector="components/example/Review.vue:34:9" />
       |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    35 |          <td data-v-inspector="components/example/Review.vue:35:9">
       |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    36 |            <CommonInput :value="data.text" />
       |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    37 |          </td>
       |  ^^^^^^^^^^^^^
    38 |        </tr>
       |  ^^^^^^^^^^^
      Plugin: vite:vue
      File: /Users/hiro-lapis/Projects/web/components/Review.vue
```

### 原因
[Official reference Suppressing Hydration Mismatches](https://vuejs.org/guide/scaling-up/ssr.html#suppressing-hydration-mismatches)


このwarning、vue3.5から警告が出るようになった模様。
警告が出るようになったと同時に`data-allow-mismatch`というattributeを設定することでwarningを抑制できる模様。
SPAアプリを開発している場合であっても、このwarningは出ます。


### 解消法

方法①適切なマークアップをする

当たり前のことですが、warningが出ている箇所をチェックし、HTMLの規格に沿ったマークアップにすることでwarningを解消できます。

手間はかかりますが、一番素直な対応ですし、コードの品質を上げるという意味でもこちらが望ましそうです。

方法②custom attributeをつける
warning が出ているHTMLに`data-allow-mismatch`をつつけることで黙らせることはできます。

が、configとかで一律warningを出さなく設定することはできない模様。。。

SPAだろうがなんだろうが、SSRフレンドリーなマークしろってことですかね😅

### hydration warning が出るマークアップ一例

①tableタグ直下でcolタグを使っている

```.html
// NG
<table>
    <col style="width: 30%" />
    <thead>...略
```
```
 WARN  warning: <col> cannot be child of <table>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.
```

[MDN table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#visual_layout_of_table_contents)を見ると、table直下で許容されるタグは限られている。
よって、↓以下のように修正すべき。
ちなみに、<colgroup>でラップすることによるデザイン崩れは起きません。(cssでcolにスタイルを当てたら話は別ですが)

```.html
<table>
    <colgroup>
        <col style="width: 30%" />
    </colgroup>
    <thead>...略
```

①tbodyタグ直下でtdタグを使っている

```.html
// NG
<tbody>
    <td>...略
```

```
WARN  warning: <td> cannot be child of <tbody>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.
```

[MDN tbody Permitted content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody#technical_summary)のTag Permissionを見ると、tbody下で許容されるタグは限られている。
よって、↓以下のように修正すべき。

```.html
// NG
<tbody>
    <tr>
        <td>...略
```

③summary タグ内でliタグを使っている

```.html
<li>
    <summary>

```

```
warning: <summary> cannot be child of <li>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.
```

[MDN li Technical li](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#flow_content)にもあるようにliタグの子要素はFlow contentnに属するものである必要がある