demo · v133
Selection state inside a delegatesFocus boundary
Drag-select text inside the rich-editor. The read-out shows document.getSelection() (light-tree view) and shadowRoot.getSelection() (shadow-tree view) updating together — pre-133 the latter stayed empty after the click delegation.
Try selecting words inside this paragraph. Watch both selections appear below.
—
document.getSelection()—
shadowRoot.getSelection()—
shadowRoot.activeElement—
the chain of events
When a shadow host has delegatesFocus: true, a click on the host is supposed to: (1) forward focus to the first focusable descendant, (2) keep the click as a regular mouse event so the browser can update the selection. Pre-133 step (1) marked the event as handled and dropped step (2) on the floor — clicking dragged-selected nothing because the browser had already short-circuited. The fix preserves the selection update side-effect while still honouring the focus delegation.
class Editor extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open", delegatesFocus: true })
.innerHTML = `<textarea></textarea>`;
}
}