doc: Update shadow root section for test-doc-blocks

doc/01-user-guide.adoc

@@ -857,9 +857,8 @@ There are a few terms that are important to understand when dealing with the Sha
 The "shadow root host" is the element in the standard DOM to which a shadow root is attached as a property.
 The "shadow root" is the top of the shadow DOM tree rooted at the shadow root host.
 
-The following examples use this HTML fragment that has a bit of shadow DOM in it.
+The following examples use this HTML fragment in the User Guide sample HTML that has a bit of shadow DOM in it.
 
-//:test-doc-blocks/skip
 [source,html]
 ----
 <span id="not-in-shadow">I'm not in the shadow DOM</span>
@@ -875,53 +874,49 @@ Everthing in the `template` element is part of the shadow DOM.
 The `div` with the `id` of `shadow-root-host` is, as the ID suggests, the shadow root host element.
 
 Given this HTML, you can run a standard `query` to find the shadow root host and then use `get-element-property-el` to return to the `"shadowRoot"` property.
+Note that the element IDs returned in the following examples will be unique to the specific Etaoin driver and driver session and you will not see the same IDs.
 
-// This has unique element ID's that are specific to the execution run, so skip tests.
-//:test-doc-blocks/skip
 [source,clojure]
 ----
 (e/query driver {:id "shadow-root-host"})
-;; => "78344155-7a53-46fb-a46e-e864210e501d"
+;; an element ID similar to (but not the same as)
+;; "78344155-7a53-46fb-a46e-e864210e501d"
 
 (e/get-element-property-el driver (e/query driver {:id "shadow-root-host"}) "shadowRoot")
-;; => {:shadow-6066-11e4-a52e-4f735466cecf
-;; =>  "ac5ab914-7f93-427f-a0bf-f7e91098fd37"}
+;; something similar to
+;; {:shadow-6066-11e4-a52e-4f735466cecf "ac5ab914-7f93-427f-a0bf-f7e91098fd37"}
 
 (e/get-element-property driver {:id "shadow-root-host"} "shadowRoot")
-;; => {:shadow-6066-11e4-a52e-4f735466cecf
-;; =>  "ac5ab914-7f93-427f-a0bf-f7e91098fd37"}
+;; something similar to
+;; {:shadow-6066-11e4-a52e-4f735466cecf "ac5ab914-7f93-427f-a0bf-f7e91098fd37"}
 ----
 
 If you go this route, you're going to have to pick apart the return
-value.
+values.
 The element-id of the shadow root is the string value of the first map key.
 
 You can get the shadow root element ID more directly using Etaoin's `get-element-shadow-root` API.
-The query parameter looks for an element in the standard DOM and returns its shadow root property.
+The query parameter looks for a matching element in the standard DOM and returns its shadow root property.
 
-// This has unique element ID's that are specific to the execution run, so skip tests.
-//:test-doc-blocks/skip
 [source,clojure]
 ----
 (e/get-element-shadow-root driver {:id "shadow-root-host"})
-;; => "ac5ab914-7f93-427f-a0bf-f7e91098fd37"
+;; something similar to
+;; "ac5ab914-7f93-427f-a0bf-f7e91098fd37"
 ----
 
 If you already have the shadow root host element, you can return its corresponding shadow root element ID using `get-element-shadow-root-el`.
 
-// This has unique element ID's that are specific to the execution run, so skip tests.
-//:test-doc-blocks/skip
 [source,clojure]
 ----
 (def host (e/query driver {:id "shadow-root-host"}))
-;; => #'user/host
 (e/get-element-shadow-root-el driver host)
-;; => "ac5ab914-7f93-427f-a0bf-f7e91098fd37"
+;; something similar to
+;; "ac5ab914-7f93-427f-a0bf-f7e91098fd37"
 ----
 
 You can test whether an element is a shadow root host using `has-shadow-root?` and `has-shadow-root-el?`.
 
-//:test-doc-blocks/skip
 [source,clojure]
 ----
 (e/has-shadow-root? driver {:id "shadow-root-host"})
@@ -939,27 +934,23 @@ If the host is identified, the `shadow-q` parameter is a query that is executed
 
 The `query-shadow-root-el` and `query-all-shadow-root-el` allow you to specify the shadow root host element directly, rather than querying for it.
 
-// This has unique element ID's that are specific to the execution run, so skip tests.
-//:test-doc-blocks/skip
 [source,clojure]
 ----
-(e/query-shadow-root driver {:id "shadow-root-host"} {:css "#in-shadow"})
-;; => "30fca382-6d4a-4f8a-9534-db76a1ed7cba"
-(e/get-element-text-el driver "30fca382-6d4a-4f8a-9534-db76a1ed7cba")
+(def in-shadow (e/query-shadow-root driver {:id "shadow-root-host"} {:css "#in-shadow"}))
+(e/get-element-text-el driver in-shadow)
 ;; => "I'm in the shadow DOM"
 
 (->> (e/query-all-shadow-root driver {:id "shadow-root-host"} {:css "span"})
            (map #(e/get-element-text-el driver %)))
 ;; => ("I'm in the shadow DOM" "I'm also in the shadow DOM")
 
-(def root (e/get-element-shadow-root-el driver host))
-;; => #'user/root
-(e/get-element-text-el driver (e/query-shadow-root-el driver root {:css "#in-shadow"}))
+(def shadow-root (e/get-element-shadow-root-el driver host))
+(e/get-element-text-el driver (e/query-shadow-root-el driver shadow-root {:css "#in-shadow"}))
 ;; => "I'm in the shadow DOM"
-
-(->> (e/query-all-shadow-root-el driver root {:css "span"})
+ 
+(->> (e/query-all-shadow-root-el driver shadow-root {:css "span"})
            (map #(e/get-element-text-el driver %)))
-;; => ("I'm in the shadow DOM" "I'm also in the shadow DOM")
+;; > ("I'm in the shadow DOM" "I'm also in the shadow DOM")
 ----
 
 [#shadow-root-browser-limitations]

doc/user-guide-sample.html

@@ -140,6 +140,15 @@ <h2>Query Tree Example</h2>
     </div>
   </div>
 
+  <h2>Shadow DOM Example</h2>
+  <span id="not-in-shadow">I'm not in the shadow DOM</span>
+  <div id="shadow-root-host">
+      <template shadowrootmode="open">
+          <span id="in-shadow">I'm in the shadow DOM</span>
+          <span id="also-in-shadow">I'm also in the shadow DOM</span>
+      </template>
+  </div>
+
   <h2>Frames</h2>
   <p id="in-main-page">In main page paragraph</p>
   <iframe id="frame1" src="user-guide-sample-frame1.html"></iframe>