demo · v133
delegatesFocus selection
Two custom elements. Both have delegatesFocus: true. Select text spanning slotted content and shadow content. Watch the live Selection readout — pre-133 the selection would snap to the host; Chrome 133+ keeps it within the shadow root.
Slotted paragraph (light DOM). Try drag-selecting from here across the boundary into the shadow text below.
Slotted paragraph two — another card with its own shadow root.
selection length
0
selection text (first 60 chars)
—
Selection is read via getSelection() at the document and shadow root level — both should agree post-133.
the code
class FancyCard extends HTMLElement {
constructor() {
super();
const sr = this.attachShadow({ mode: "open", delegatesFocus: true });
sr.innerHTML = `<style>:host{display:block}</style>
<slot></slot>
<p>Shadow-root paragraph. Drag-select across this and the slotted text.</p>`;
}
}
customElements.define("fancy-card", FancyCard);