IMO, this whole cloning idea is overcomplicated. Let the duplication of markup happen server side or in React (or whatever). If the developer wants a <selected

IMO, this whole cloning idea is overcomplicated. Let the duplication of markup happen server side or in React (or whatever). If the developer wants a <selectedoption>, they should fill it with <option> elements that correspond to the <option> elements that appear in the dropdown. Each option could reuse the <label for=""> pattern to associate them with their counterpart. Then, when an option is selected by the end user, the corresponding option inside the <selectedoption> would get a `selected` attribute. The default CSS would be: selectedoption > option { display: none; } selectedoption > option[selected] { display: block; } This gives complete control to the developer, works fine without JS, and wouldn't have shocking side effects. As they say, "duplication is cheaper than the wrong abstraction".