v137 · miscellaneous

Selection API getComposedRanges and direction

This feature ships two new API methods for the Selection API: * Selection.direction which returns the selection's direction as either "none", "forward" or "backward" * Selection.getComposedRanges() which returns a list of 0 or 1 “composed” StaticRange

concepts

  1. Composed Ranges

    Selection.getComposedRanges() returns shadow-root-crossing range data; selection.direction tells you which end is the anchor. Modern selection model, finally exposed.

  2. Direction-aware Toolbar

    A floating selection toolbar that uses selection.direction to anchor at the visual start regardless of drag direction. The real-world reason the field was added.

  3. Shadow Selection Explorer

  4. Selection Direction Detector

    Select text in a rich editor and watch selection.direction update live — "forward" for left-to-right drags, "backward" for right-to-left. Shows getComposedRanges() output including container node names, start/end offsets, and collapsed state.

    Drag-select across plain DOM, an open shadow root, and a closed shadow root. Legacy getRangeAt goes blind at the boundary; getComposedRanges() surfaces every fragment plus the resolved direction. Includes live quote / case-toggle buttons that operate on the composed selection.

  5. Text Annotator

    Select text across shadow DOM inline components and apply colour highlights via getComposedRanges(). Shows a composed range inspector with cross-shadow detection, direction, and container nodes. Without composed ranges, shadow-boundary selections return empty from getRangeAt(0).

  6. Word Counter

    Real-time word count, character count, and direction badge that works across shadow DOM boundaries. Side-by-side comparison of getComposedRanges() vs getRangeAt(0) character counts shows exactly where the legacy API truncates cross-shadow selections. Includes a selection history log.

why it shipped

Shadow DOM is now supported across all major rendering engines. We should update the Selection API so users can select across shadow boundaries and see interoperable behaviors. The new changes include API support for multiple ranges across a composed tree.

references