Add support for class-name as `data-hotkey-scope`

[theinterned]

Problem

Currently data-hotkey-scope only supports matching the (event.target i.e. the scope) as an id, this has a few limitations:

1. I may want to specify multiple elements as the scope for my hotkey.
2. 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).
3. 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.