Firefox 151 adds style queries and document picture-in-picture

Mozilla released Firefox 151 on May 19 with CSS container style queries, declarative shadow-root slot assignment, and Document Picture-in-Picture on desktop. The MDN developer notes distinguish those enabled features from several additional capabilities that remain behind preferences.

Components can react to declared style state

Firefox now supports style() queries in the CSS @container rule. A descendant can select styles based on a container’s valid declaration, property, or custom property. This provides a useful component-state channel: a parent can publish a custom property such as a density or theme token, while descendants adapt without requiring an extra class on each node.

The shadowrootslotassignment attribute on a declarative shadow-root template also arrives in this release. It allows slot-assignment behavior to be represented in HTML and reflected through the related DOM properties. That is relevant to server-rendered web components because the intended shadow structure can exist before client JavaScript runs.

Document Picture-in-Picture lets a desktop page open an always-on-top window populated with arbitrary HTML. Unlike video-only picture-in-picture, it can host controls, conference participants, timers, or other compact interfaces.

Define lifecycle rules before adopting the window

A picture-in-picture document is another browsing surface with its own focus, teardown, and synchronization concerns. Test what happens when the opener navigates, authentication expires, the user closes either window, or the application reconnects after sleep. Keep essential actions available in the main document and make the compact window understandable with keyboard and assistive technology.

For style queries, avoid using custom properties whose only purpose is hidden control flow; shared tokens should remain documented. Also confirm browser coverage before deleting class-based fallbacks. Firefox 151 ships the baseline implementation described by Mozilla, while range-syntax style queries and other experimental items listed later in the notes remain disabled by default.