Chrome 131 升級踩雷與 HTML5 超客製化 SELECT 元素

2024-11-20 11:40 PM

同事分享，這幾天踩到 Chrome/Edge 升級 131 版的雷。

古蹟系統有段用 innerHTML 動態更新 <select> 選項的網頁，在 Chrome/Edge 升級 131 版後壞掉了。

設法重現問題，找了台久未開機的 VM 還有 Edge 130 版測試模擬網頁如下圖，<select> 下方原本有個 <input type="hidden">：

自動升級 131 版後，一模一樣的程式，下方的 <input type="hidden"> 消失惹：

其實，會踩雷是因為原本程式寫法有問題：

<!DOCTYPE html>
<html>
<head>
    <meat charset="utf-8">
    <title>Custom Select</title>
</head>
<body>
    <div>
        <select name="lang" />
        <input type="hidden" name="flag" value="Y" />
    </div>
    <script>
        document.querySelector("select[name=lang]")
            .innerHTML = `<option value="C#">C#</option>
                <option value="JavaScript">JavaScript</option>
                <option value="Python">Python</option>`;
    </script>
</body>
</html>

上面的 <select name="lang" /> 寫法是關鍵。XML 語法中 <elementTag ...></elementTag> 與 <elementTag ... /> 意義相同且可互換，但在 HTML 中 Self-Closing Tag 只能用在 Void Elemen，像 <span /> 便不是合法寫法，這個雷我在兩年前踩過。(參考：HTML5 自閉標籤(Self-Closing Tag)誤用案例)

同事遇到的這枚地雷則又再藏了兩年，撐到 Chrome 131 <select /> 解析行為改變才引爆。131 版把 <select /> 後方的 <input type="hidden"> 也視為其子元素，置換 innerHTML 時一併被 <option>... 取代，導致隱藏欄位消失。

不過，為什麼 Chrome 沒事幹嘛做了這項調整？131 版發行公告提到是為了支援未來可能的新規格 - Customizable Select。

這項還在預覽階段的新規格將允許在 <select></select> 放入 <button>、<div> 等元素、在 <option> 中放入 <img> (如下圖)，把百年傳統的 <select> 玩出新高度。(個人不怎麼愛就是了，因為很吃瀏覽器支援度，我寧可自刻選擇器，較無跨瀏覽器限制且更具彈性)