Skip to content

Instantly share code, notes, and snippets.

@Kaleidea
Created November 9, 2021 16:06
Show Gist options
  • Save Kaleidea/b3a74e4e8eb3e8216484ae0d29f955f1 to your computer and use it in GitHub Desktop.
Save Kaleidea/b3a74e4e8eb3e8216484ae0d29f955f1 to your computer and use it in GitHub Desktop.
<search> element alternatives

Alternatives

Should the implementation of a hybrid element as defined above fall through, an alternative is to define 2 elements (<search> and <searchform>) for the 2 use-cases:

  • <search> === <div role=search>
  • <searchform action="..."> === <form role=search action="...">

Implementing this is trivial by aliasing HTMLElement -> <search> and <form> -> <searchform>. Corner cases of nesting need no consideration, and the specification is a trivial "Uses HTMLFormElement, as defined for form elements". The trade-off is that two instead of one element specifications are added.

Should 2 elements find opposition, the proposal would be to favor the best practice:

  • <search action="..."> === <form role=search action="...">
  • <search> can be used without form submit functionality by capturing the ENTER keypress on inputs in a JS eventhandler, however
  • <div role=search> remains the suggested usage if form functionality is is to be avoided.

Implementing this is trivial by aliasing HTMLFormElement -> <search>. The trade-off is that a few use-cases of the original request is not treated as first-class. The reasoning above implies that the best practice is more important to be treated as first-class, thus if a choice has to be made it should be to favor form semantics. This proposal makes a strong effort to avoid such trade-off.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment