I have a web component, <kr-radios></kr-radios> that encapsulates a <fieldset></fieldset> with multiple <input type="radio">. In this bug <fieldset> can be replaced with pretty much anything, e.g. <div> and bug will still hold true.
Say I have a form like the following:
Click a radio in #1 and subsequently in #2 will clear the selection in #1. It appears that Webkit only uses <form></form> to scope the radio input, and it does not respect Shadow DOM boundaries. Clicking a radio in another Shadow DOM should not affect the Shadow DOM somewhere else.
The workaround is to replace <fieldset> with <form> in the Shadow DOM of my component.
Hi Webkit team,
I may have the same bug.
I created a reduced test case here:
The thing is, if I have a custom element with shadow DOM and if this component contains input[type=radio], all the inputs (cross shadow DOM) are in the same group. It is not the case in Chrome and Firefox.
Anyone knows what the spec says and if it's a bug?