Investigate using :has-slotted when it's available in all browsers
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 39
- Forks
- 14
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 13
Description
🧹 Tech Debt
We have some places where we apply styles based on whether a slot contains content. Our current pattern for doing this involves using the FAST slotted directive to run JS code that tracks content being added and removed, then set classes on the component based on that state.
The native :has-slotted CSS pseudoclass is meant to provide the same capability using pure CSS. It's not currently available in Safari but once it is we should investigate whether we can use it instead to simplify our code and reduce execution overhead.
A non-exhaustive list of places that do this:
Lots more context on this CSSWG issue, including a tangent about why :has isn't appropriate since it doesn't operate across the shadow root boundary: https://github.com/w3c/csswg-drafts/issues/6867
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the slot-handling code in packages/spright-components/src/chat/message/index.ts, packages/nimble-components/src/dialog/index.ts, and the FAST start/end pattern linked in the issue. Check current browser support for :has-slotted, especially Safari, and compare each existing slotted directive use with the native CSS approach. Done means determining whether these cases can be simplified without relying on unsupported browsers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, typescript
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100