Skip to content

Feature Request: Support for :is() and :where() pseudo-class selectors #300

@jetzhliu

Description

@jetzhliu

Description
Currently, lol-html is an incredibly efficient tool for rewriting HTML on the fly. However, when dealing with complex CSS selectors that involve multiple groupings, the code can become quite verbose. Adding support for the :is() and :where() functional pseudo-classes would greatly enhance the developer experience and potentially optimize selector matching logic.

Background
:is(): The :is() CSS pseudo-class function takes a selector list as its argument and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.

:where(): The :where() CSS pseudo-class function takes a selector list as its argument and selects any element that can be selected by one of the selectors in that list. The difference between :where() and :is() is that :where() always has 0 specificity.

MDN Documentation:

:is() - CSS: Cascading Style Sheets | MDN

:where() - CSS: Cascading Style Sheets | MDN

Why this is important for lol-html
lol-html is built for speed and low-latency streaming. Supporting these selectors is not just about "syntactic sugar"; it has practical benefits for streaming processing:

Reduced Handler Overhead: Instead of registering multiple rewriters for different selectors that share the same logic, we can use a single :is() selector. This reduces the number of closures and state machines the engine needs to track during the stream.

Cleaner Logic for Complex Scaffolding: In edge computing (like Cloudflare Workers), we often need to target elements like header p, main p, footer p.

Current way: Requires repeating the logic or creating a regex-like complexity in manual matching.

With :is(): :is(header, main, footer) p is much more declarative and easier for the parser to optimize internally.

Additional Context
Since lol-html uses a specialized CSS selector parser optimized for byte streams, I understand this might require changes in the underlying cssparser or the way lol-html builds its matching tree. However, as the web moves towards these grouping selectors, supporting them would make lol-html the most modern and powerful streaming rewriter available.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions