記事一覧はこちら

HTML5のShadow DOMを使ってもラジオボタンのname属性は重複しないように気をつけないといけない

<input type="radio" name="radio_test">のname属性はShadow DOMの中で分離してくれない@chrome47Win

https://fushihara.org/blog/archives/2531に関連してる。自作のchrome拡張で何故かラジオボタンのチェック状態が勝手に解除されると思ったら、ラジオボタンのname属性に基づく1つのボタンしかチェック状態にならない処理はShadow DOMを突き抜けてくれるらしい

テスト用コードはこちら。3つあるボタンはそれぞれがShadowDOM。 imgTemp-2015-12-28-22-31-29 ShadowDOMが3つある訳だから、当然ラジオボタンもそれぞれ1つづつ合計3つ押せる・・・と思ったのに1つしか押せない

えー