Bug 199568 - Radio input fields not scoped by Shadow DOM boundaries
Summary: Radio input fields not scoped by Shadow DOM boundaries
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: Safari 12
Hardware: Macintosh macOS 10.14
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Blocks: 148695
  Show dependency treegraph
Reported: 2019-07-08 01:00 PDT by Jonathan Lin
Modified: 2019-07-10 11:38 PDT (History)
7 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Jonathan Lin 2019-07-08 01:00:33 PDT
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:

<kr-radios></kr-radios> #1
<kr-radios></kr-radios> #2

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.
Comment 1 Radar WebKit Bug Importer 2019-07-08 18:28:19 PDT
Comment 2 Hubert SABLONNIÈRE 2019-07-10 11:38:09 PDT
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?