Chrome 131 升級踩雷與 HTML5 超客製化 SELECT 元素
0 |
同事分享,這幾天踩到 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>
玩出新高度。(個人不怎麼愛就是了,因為很吃瀏覽器支援度,我寧可自刻選擇器,較無跨瀏覽器限制且更具彈性)
要嘗試這個新功能,實測得安裝金絲雀版的 Chrome 或 Edge,並開啟 #experimental-web-platform-features 設定才看得到。(參考:Request for developer feedback: customizable select)
不知是否版本還在調整中,實測呈現效果與文章的展示有落差,但意思到了。
文章範例如上圖
我執行的結果國旗圖案大小不一,選擇器上的國旗也沒顯示
增長見聞完畢。
A issues with dynamic select updates using innerHTML after Chrome/Edge updated to version 131. This change is due to Chrome’s preparation for the new Customizable Select feature. Proper HTML syntax avoids such issues.
Comments
Be the first to post a comment