Add getRangeAt info that you can't trust it

files/en-us/web/api/selection/getrangeat/index.md

@@ -8,8 +8,12 @@ browser-compat: api.Selection.getRangeAt
 
 {{ ApiRef("DOM") }}
 
-The **`Selection.getRangeAt()`** method returns a range object
-representing one of the ranges currently selected.
+The **`getRangeAt()`** method of the {{domxref("Selection")}} interface returns a range object representing a currently selected range.
+
+If the endpoints of the selected range are within a {{glossary("shadow tree")}} then JavaScript does not have visibility of the shadow nodes, and the method should rescope the range to include the host element that contains the end point.
+In practice most browsers do not yet implement this behaviour and the returned range is unpredictable.
+
+> **Note:** When selecting within nodes that might contain a shadow root, you can use {{domxref("Selection.getComposedRanges()")}} (if supported) to get a selection range inside a shadow tree, or to reliably rescope the selection to the host node.
 
 ## Syntax
 
@@ -20,8 +24,8 @@ getRangeAt(index)
 ### Parameters
 
 - `index`
-  - : The zero-based index of the range to return. A negative number or a number greater
-    than or equal to {{domxref("Selection.rangeCount")}} will result in an error.
+  - : The zero-based index of the range to return.
+    A negative number or a number greater than or equal to {{domxref("Selection.rangeCount")}} will result in an error.
 
 ### Return value
 

files/en-us/web/api/selection/setbaseandextent/index.md

@@ -8,9 +8,9 @@ browser-compat: api.Selection.setBaseAndExtent
 
 {{ ApiRef("DOM") }}
 
-The **`setBaseAndExtent()`** method of the
-{{domxref("Selection")}} interface sets the selection to be a range including all or
-parts of two specified DOM nodes, and any content located between them.
+The **`setBaseAndExtent()`** method of the {{domxref("Selection")}} interface sets the selection to be a range including all or parts of two specified DOM nodes, and any content located between them.
+
+The anchor and focus nodes can be located in a {{glossary("shadow tree")}}, if supported by the browser.
 
 ## Syntax
 
@@ -24,31 +24,25 @@ setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset)
   - : The node at the start of the selection.
 - `anchorOffset`
 
-  - : The number of child nodes from the start of the anchor node that should be excluded
-    from the selection. So for example, if the value is 0 the whole node is included. If
-    the value is 1, the whole node minus the first child node is included. And so on.
+  - : The number of child nodes from the start of the anchor node that should be excluded from the selection.
+    So for example, if the value is 0 the whole node is included.
+    If the value is 1, the whole node minus the first child node is included.
+    And so on.
 
-    If `anchorNode` is a {{domxref("Text")}} node, the offset refers to the number of
-    characters from the start of the {{domxref("Node.textContent")}} that should be
-    excluded from the selection.
+    If `anchorNode` is a {{domxref("Text")}} node, the offset refers to the number of characters from the start of the {{domxref("Node.textContent")}} that should be excluded from the selection.
 
 - `focusNode`
   - : The node at the end of the selection.
 - `focusOffset`
 
-  - : The number of child nodes from the start of the focus node that should be included
-    in the selection. So for example, if the value is 0 the whole node is excluded. If the
-    value is 1, the first child node is included. And so on.
+  - : The number of child nodes from the start of the focus node that should be included in the selection.
+    So for example, if the value is 0 the whole node is excluded.
+    If the value is 1, the first child node is included. And so on.
 
-    If `focusNode` is a {{domxref("Text")}} node, the offset refers to the number of
-    characters from the start of the {{domxref("Node.textContent")}} that should be
-    included in the selection.
+    If `focusNode` is a {{domxref("Text")}} node, the offset refers to the number of characters from the start of the {{domxref("Node.textContent")}} that should be included in the selection.
 
-> **Note:** If the focus position appears before the anchor position in
-> the document, the direction of the selection is reversed — the caret is placed at the
-> beginning of the text rather the end, which matters for any keyboard command that
-> might follow. For example, <kbd>Shift</kbd> + <kbd>➡︎</kbd> would cause the selection
-> to narrow from the beginning rather than grow at the end.
+> **Note:** If the focus position appears before the anchor position in the document, the direction of the selection is reversed — the caret is placed at the beginning of the text rather the end, which matters for any keyboard command that might follow.
+> For example, <kbd>Shift</kbd> + <kbd>➡︎</kbd> would cause the selection to narrow from the beginning rather than grow at the end.
 
 ### Return value
 
@@ -61,17 +55,13 @@ None ({{jsxref("undefined")}}).
 
 ## Examples
 
-In this example, we have two paragraphs containing spans, each one containing a single
-word. The first one is set as the `anchorNode` and the second is set as the
-`focusNode`. We also have an additional paragraph that sits in between the
-two nodes.
+In this example, we have two paragraphs containing spans, each one containing a single word.
+The first one is set as the `anchorNode` and the second is set as the `focusNode`.
+We also have an additional paragraph that sits in between the two nodes.
 
-Next, we have two form inputs that allow you to set the `anchorOffset` and
-`focusOffset` — they both have a default value of 0.
+Next, we have two form inputs that allow you to set the `anchorOffset` and `focusOffset` — they both have a default value of 0.
 
-We also have a button that when pressed invokes a function that runs the
-`setBaseAndExtent()` method with the specified offsets, and copies the
-selection into the output paragraph at the very bottom of the HTML.
+We also have a button that when pressed invokes a function that runs the `setBaseAndExtent()` method with the specified offsets, and copies the selection into the output paragraph at the very bottom of the HTML.
 
 ```html
 <h1>setBaseAndExtent example</h1>
@@ -129,8 +119,7 @@ button.onclick = () => {
 };
 ```
 
-Play with the live example below, setting different offset values to see how this
-affects the selection.
+Play with the live example below, setting different offset values to see how this affects the selection.
 
 {{ EmbedLiveSample('Examples', '100%', 370) }}