3 ms·

The issue is that the "selected <option>" and "the <selectedoption> in the <button>" need to be able to render at the same time, behave independently, and be in

The issue is that the "selected <option>" and "the <selectedoption> in the <button>" need to be able to render at the same time, behave independently, and be independently styled. If you have a psuedo-element, it still needs to get its content from somewhere, and needs to be placed somewhere in the tree. With <selectedoption> you can put it wherever you want in the <button>, but you'd lose that functionality with a pseudo. The same questions remain about when the content of the pseudo gets updated. And now you need to figure out how events work.

mminer237 2y ago
I agree the question of events still kind of remains. I think they should always be mirrored because they shouldn't be two separate elements. You shouldn't be able to change the "selectedoption" because it should be a pseudo-element. If the <option> changes, the pseudo-element should immediately change. It gets its content from the option. You don't need to rearrange the HTML of the "button". You can use ::before, ::after, and general styling to do anything you need to. I'm struggling to see any advantage even if you were okay with using HTML to style pages.
- jaffathecake 2y ago
  > I think they should always be mirrored because they shouldn't be two separate elements That maintains one of the problems I'm worried about. If you have a mouseenter listener on something in an <option> that triggers a fancy animation, you (surely most of the time) don't want that action repeated in the <selectedoption>, because it's the thing in the <option> that was hovered, not the thing in the <selectedoption>. > You can use ::before, ::after, and general styling to do anything you need to. You don't need to look at too many web sites to see examples where folks have added divs for styling, because pseudo-elements didn't provide enough style hooks.
  - mminer237 2y ago
    You can always add <div>s to the <option> itself and conditionally check whether it's `select > option` or `select::selected-option`.

mminer237 2y ago

I agree the question of events still kind of remains. I think they should always be mirrored because they shouldn't be two separate elements. You shouldn't be able to change the "selectedoption" because it should be a pseudo-element. If the <option> changes, the pseudo-element should immediately change. It gets its content from the option. You don't need to rearrange the HTML of the "button". You can use ::before, ::after, and general styling to do anything you need to. I'm struggling to see any advantage even if you were okay with using HTML to style pages.

jaffathecake 2y ago
> I think they should always be mirrored because they shouldn't be two separate elements That maintains one of the problems I'm worried about. If you have a mouseenter listener on something in an <option> that triggers a fancy animation, you (surely most of the time) don't want that action repeated in the <selectedoption>, because it's the thing in the <option> that was hovered, not the thing in the <selectedoption>. > You can use ::before, ::after, and general styling to do anything you need to. You don't need to look at too many web sites to see examples where folks have added divs for styling, because pseudo-elements didn't provide enough style hooks.
- mminer237 2y ago
  You can always add <div>s to the <option> itself and conditionally check whether it's `select > option` or `select::selected-option`.