github / github/hotkey

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

Aperta
#55 0 commenti 1 reazione 0 assegnatari Vedi su GitHub
Lingua principale
JavaScript
Stelle
3.3k
Fork
99
Merge medio
14h 22m
PR unite (30g)
6

Descrizione

## 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:

```html


```

#### 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.

```html


```

## 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.

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Start by locating the code that reads and matches the data-hotkey-scope attribute, then inspect any related tests or examples. Compare the proposed class-name syntax with the alternative data attributes and verify that existing id behavior remains supported. Done means multiple scoped elements can be addressed without full CSS-selector support, with the chosen API covered by tests.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.