Add support for class-name as `data-hotkey-scope`
theinterned opened this issue · comments
Problem
Currently data-hotkey-scope
only supports matching the (event.target
i.e. the scope) as an id
, this has a few limitations:
- I may want to specify multiple elements as the scope for my hotkey.
- I may need to specify an element rendered by a third part library as my scope and do not have access to set an
id
on that element. (This is my current actual issue). - Likely there are other uses-cases where an
id
doesn't work as a selector...
Suggestion
Add the ability to specify a class-name instead of an id for data-hotkey-scope
.
Some possible API thoughts:
Support a 'mini selector syntax'
The API could be updated to take a #
prefix (for id
) or .
prefix (for class
name). We could continue to treat an un-prefixed value as an id:
<button data-hotkey-scope=".my-scope-class-name" />
<button data-hotkey-scope="#my-scope-id" />
<button data-hotkey-scope="my-scope-id" /> <!-- legacy support -->
Add new data-attributes:
We could add data-hotkey-scope-class
and data-hotkey-scope-id
attributes. Again we could continue to treat the existing data-hotkey-scope
as an id scope.
<button data-hotkey-scope-class="my-scope-class-name" />
<button data-hotkey-scope-id="my-scope-id" />
<button data-hotkey-scope="my-scope-id" /> <!-- legacy support -->
Considerations
Why not allow full css-selector syntax?
I thought about the possibility of extending data-hotkey-scope
to support full css selector syntax like data-hotkey-scope="div#parent > .target-element"
... but after talking this over with @keithamus we decided the complexity and likely performance cost of such an API would not be worth it given that id
and class
name already support many use-cases.