v133 · dom

Fix text selection on Shadow DOM with delegatesFocus

A shadow host with delegatesFocus set to true will delegate its focus to its first focusable child. On a mouse click event, the child will receive focus and the event will be marked as handled. No further event dispatching is done. This is a problem because the steps to handle text selection afterward are not ran and the selection does not recognize the foc

concepts

  1. delegatesFocus selection

    Text selection across shadow boundaries with delegatesFocus now behaves correctly. Another long-standing shadow-DOM papercut.

  2. Cross-boundary select

    A custom rich-editor with delegatesFocus: true wraps a real textarea. Drag-select inside it and watch the selection persist past the focus delegation — the bug fixed in 133.

  3. Selection state probe

    Drag-select inside a delegatesFocus editor and see document.getSelection() and shadowRoot.getSelection() stay in sync — pre-133 the shadow view stayed empty.

  4. Multi-component selection

    Three delegatesFocus custom elements side-by-side. Drag-select across them and watch the live selection stats — character count, word count, and the selection range — update as you drag.

why it shipped

The Chromium issue was opened in 2019 and has 23 stars. Many web developers have mentioned this bug being a pain point to use Shadow DOM. For example, [1] and [2].

references