CSS element() in Firefox and Screen Sharing

The CSS element() function is a specialized CSS feature currently supported primarily in Mozilla Firefox that allows any HTML element to be treated as a dynamic, live image. This article explores how the element() function works, its implementation via vendor prefixes, and how web developers can leverage it in screen-sharing, streaming, and WebRTC contexts to create live UI previews, custom presenter overlays, and dynamic picture-in-picture displays without duplicating DOM nodes.

Understanding the CSS element() Function

The element() function is defined in the CSS Images Module Level 3 specification. It enables developers to take an arbitrary DOM element—identified by its ID—and use its visual representation anywhere a CSS <image> is accepted, such as in background-image or border-image.

In Firefox, this is implemented using the vendor-prefixed syntax -moz-element(#id).

.preview-container {
  background-image: -moz-element(#source-element);
  background-size: contain;
  background-repeat: no-repeat;
}

Unlike static screenshots, the image generated by element() is fully dynamic. If the underlying source element updates—whether through CSS animations, user interactions, JavaScript mutations, or playing <video> elements—the rendered background image updates in real time with hardware acceleration.

Screen-Sharing and Streaming Applications

While screen sharing typically relies on JavaScript APIs like navigator.mediaDevices.getDisplayMedia(), the element() function provides unique client-side rendering capabilities that enhance how content is shared and viewed during broadcasts.

1. Real-Time Presenter Previews and Heads-Up Displays

When an application shares a specific element or canvas during a WebRTC call, the presenter often loses visibility of what participants actually see. By using -moz-element(#shared-viewport), developers can create low-overhead heads-up displays (HUDs) or floating preview thumbnails directly within the presenter's interface. This mirrors complex DOM structures instantly without re-rendering or cloning DOM trees.

2. Picture-in-Picture (PiP) and Dynamic Overlays

Broadcasting setups often require combining multiple views, such as a presentation slide deck with a live webcam feed superimposed in the corner. Rather than managing complex absolute positioning or syncing multiple synchronized <video> elements, a presentation stage can reference a hidden camera feed using -moz-element(#webcam). This permits CSS effects (filters, masks, clipping paths, and transforms) to be applied to the mirror without altering the source feed.

3. Efficient Canvas Captures for WebRTC

WebRTC screen sharing often utilizes HTMLCanvasElement.captureStream() to transmit DOM-based application states over a media connection. Rendering arbitrary HTML to a canvas natively is notoriously complex and resource-heavy. By combining -moz-element() with SVG foreign objects or drawing pipelines, live UI components can be mirrored cleanly into capture pipelines with minimal JavaScript runtime overhead.

4. Multi-Monitor Virtual Control Rooms

In collaborative streaming tools, a director might need to monitor multiple live screen-share tiles simultaneously. Using element(), an interface can instantiate dozens of live UI thumbnails across a virtual dashboard. Because Firefox treats these as visual raster references rather than distinct interactive DOM instances, CPU and memory utilization remain significantly lower than embedding multiple <iframe> elements.

Technical Limitations

Despite its utility, developers must account for specific limitations:

  • Browser Compatibility: The feature is currently non-standard in production and only implemented reliably in Firefox behind -moz-element(). Chromium and WebKit do not support it natively.
  • Lack of Interactivity: The mirrored image is entirely passive. Pointer events, text selection, and form inputs cannot be directly manipulated on the generated background.
  • Security and Scope Restrictions: The target element must exist within the same document origin. Cross-origin frames or elements nested in detached shadow roots cannot be referenced.