Re: [csswg-drafts] [selectors] Add :role() pseudo-class (#3596)

I discovered this issue after thinking about how to write some generic code for a web component that will use an event handler to find the nearest ancestor with a specific role and then get some more information about it. It looks like there's a current limitation, where a custom element has role set via `ElementInternals.role`, which means you cannot rely on a CSS selector to find that custom element by its role. For example,

```
myCustomTable.addEventHandler('click', ({ target }) => {
  // This won't find an element whose role is set with ElementInternals.role
  const clickedCell = target.closest('td, [role="cell"]');

  if (clickedCell) {
    // There's a separate, but similar problem here that AOM should address
    const [x, y] = getColumnAndRowIndex(clickedCell);
    handleCellClick(x, y);
  }
});
```

Not only would `:role()` simplify the selector, it would cover this current limitation.

-- 
GitHub Notification of comment by andyearnshaw
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3596#issuecomment-1704957200 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 4 September 2023 09:48:32 UTC