Problem
Selectors with comma are currently straight out rejected in a few places:
|
function validateSelector(selector: string): string { |
|
if (selector.indexOf(',') !== -1) { |
|
throw new Error(`Selector cannot contain commas: ${selector}`); |
|
} |
|
function validateSelector( |
|
options: CommandRegistry.IKeyBindingOptions |
|
): string { |
|
if (options.selector.indexOf(',') !== -1) { |
|
throw new Error(`Selector cannot contain commas: ${options.selector}`); |
|
} |
This is understandable because the selector specificity can be only computed for individual selector, not a comma-separated list of selectors.
However, the :is() and :where() selectors now widely supported by browsers and take a comma-separated lists of selectors:
:is() counts towards specificity with the specificity of the most specific element on the list:where() counts with specificity of zero (so very easy to implement!)
Lack of support for :is and :where makes creating selectors for certain commands and context menu more difficult than it should be in 2024.
Proposed Solution
Implement support for :is() and :where().
Additional context
Encountered this in jupyterlab/jupyterlab#15845 when trying to make the context menu show for .jp-RunningSessions-item:is(.jp-mod-kernel,.jp-mod-kernel-widget).
Problem
Selectors with comma are currently straight out rejected in a few places:
lumino/packages/widgets/src/contextmenu.ts
Lines 330 to 333 in 10d232e
lumino/packages/commands/src/index.ts
Lines 1561 to 1566 in 10d232e
This is understandable because the selector specificity can be only computed for individual selector, not a comma-separated list of selectors.
However, the
:is()and:where()selectors now widely supported by browsers and take a comma-separated lists of selectors::is()counts towards specificity with the specificity of the most specific element on the list:where()counts with specificity of zero (so very easy to implement!)Lack of support for
:isand:wheremakes creating selectors for certain commands and context menu more difficult than it should be in 2024.Proposed Solution
Implement support for
:is()and:where().Additional context
Encountered this in jupyterlab/jupyterlab#15845 when trying to make the context menu show for
.jp-RunningSessions-item:is(.jp-mod-kernel,.jp-mod-kernel-widget).