Add ShadowRoot annotation to support locating shadow root elements

Author: bjuric

docs/04-dsl.mdx

@@ -682,6 +682,10 @@ All Gherkin steps that match the DSL expressions described here are readily exec
 
 #### Element locators
 
+:::info Shadow DOM also supported
+Since [v4.8.0](https://github.com/gwen-interpreter/gwen-web/releases/tag/v4.8.0), you can use the `@ShadowRoot` annotation on any locator step to refer to a shadow root element.
+:::
+
 <details id="element-can-be-located-by-selector-expression">
   <summary class="dsl">
 

docs/05-annotations.mdx

@@ -35,7 +35,8 @@ Use annotations in [meta](/docs/meta) and avoid them in features where possible.
 | [`@Parallel`](/docs/parallel#parallel-scenario-outline-examples) | Examples                                                  | [v3.69.0](https://github.com/gwen-interpreter/gwen-web/releases/tag/v3.69.0)    | Executes expanded examples in outlines in parallel                                                                    |
 | [`@Timeout`](/docs/locator-level-timeouts#timeout-annotations)   | Step                                                      | [v3.73.0](https://github.com/gwen-interpreter/gwen-web/releases/tag/v3.73.0)    | Specifies a timeout period on a [wait](/docs/dsl#sleeps-and-waits), [until/while](/docs/dsl#untilwhile), [for each](/docs/dsl#foreach), [assertion](/docs/dsl#assertions) or [locator](/docs/dsl#element-locators) DSL step. Examples: `@Timeout('10s')`, `@Timeout('2m30s')`, `@Timeout('2m')` |
 | [`@Delay`](/docs/locator-level-timeouts#delay-annotation)        | Step                                                      | [v3.73.0](https://github.com/gwen-interpreter/gwen-web/releases/tag/v3.73.0)    | Specifies a delay interval on a [wait](/docs/dsl#sleeps-and-waits), [until/while](/docs/dsl#untilwhile) DSL step. Examples: `@Delay('2s')`, `@Delay('1s500ms')`, `@Delay('1m')` |
-| [`@Results`](/docs/reports/csv#results-annotation)               | Feature<br/>Rule<br/>Scenario<br/>StepDef<br/>Scenario Outline<br/>Examples  | [v3.77.0](https://github.com/gwen-interpreter/gwen-web/releases/tag/v3.77.0)    | Generates CSV results for a gherkin node                                                                              |
+| [`@Results`](/docs/reports/csv#results-annotation)               | Feature<br/>Rule<br/>Scenario<br/>StepDef<br/>Scenario Outline<br/>Examples  | [v3.77.0](https://github.com/gwen-interpreter/gwen-web/releases/tag/v3.77.0)    | Generates CSV results for a gherkin node                                                           |
+| [`@ShadowRoot`](/docs/dsl#element-locators)                      | Step                                                      | [v4.8.0](https://github.com/gwen-interpreter/gwen-web/releases/tag/v4.8.0)      | Can be used on an element locator that selects a shadow DOM root                                                      |
 | `@Trim`                                                          | Step                                                      | [v3.62.0](https://github.com/gwen-interpreter/gwen-web/releases/tag/v3.62.0)    | Trims strings when performing comparison operations                                                                   |
 | `@IgnoreCase`                                                    | Step                                                      | [v3.62.0](https://github.com/gwen-interpreter/gwen-web/releases/tag/v3.62.0)    | Ignores case when performing comparison operations                                                                    |
 | `@Ignore`                                                        | Feature<br/>Scenario<br/>Rule<br/>Background<br/>Examples | [v1.0.0](https://github.com/gwen-interpreter/gwen-web/releases/tag/v1.0.0)      | Ignores and skips over a Gherkin block/node to avoid evaluation                                                       |

docusaurus.config.js

@@ -41,7 +41,7 @@ module.exports = {
           label: 'FAQ',
         },
         {
-          href: '/docs/string-interpolation#elvis-operator',
+          href: '/docs/dsl#element-locators',
           position: 'left',
           label: "What's New?",
         },