Bug 265632 – Selection API introduced in Safari 17.1 does not handle shadow dom

• Component: DOM
• Status: RESOLVED INVALID

Safari 17.1 introduced a new selection API that was supposed to handle selection within the shadow DOM as per https://bugs.webkit.org/show_bug.cgi?id=163921 

On github: https://github.com/WebKit/WebKit/pull/10843#issuecomment-1806339821


However the new selection api in the shadow DOM is not working as expected in Safari 17.1. The selection object will not contain valid dom elements and offsets.


To reproduce please use the following html/js snippet in Safari 17.1 (https://jsfiddle.net/souf123/Ly1mvxdf/2/):

```html
<div id="host"></div>
<span>I'm not in the shadow DOM</span>
```

```js
const host = document.querySelector("#host");
const shadow = host.attachShadow({ mode: "open" });
const span = document.createElement("span");
span.textContent = "I'm in the shadow DOM";
shadow.appendChild(span);

document.addEventListener('selectionchange', () => {
  console.log(window.getSelection().getComposedRanges()[0]);
} );
```

You can observe that the returned value from "getComposedRanges" does not contain correct information about the actually selected range.

[Ryosuke Niwa]

You need to pass in each ShadowRoot as an argument to getComposedRanges as in:
getComposedRanges(shadow) in the example above.