Implement new dialog shadow focus behavior

This implements the new dialog initial focus behavior specified in these
changes:
whatwg/html#7079
whatwg/html#7284
whatwg/html#7361
whatwg/html#8174

The gist of the changes are:
1. Use the DOM tree instead of the flat tree to search for an element to
   give initial focus.
2. Don't traverse into shadow roots when looking for elements to give
   initial focus unless the shadow root has delegatesFocus.

This will stay experimental until I have also made the other changes for
dialog initial focus: whatwg/html#8199
After those changes have been made as well, I will carefully enable the
flag by default.

Fixed: 383230, 670130, 1292852
Change-Id: I13995197f1942aa356cab0f3b41a0e226d1d170d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3961528
Reviewed-by: Mason Freed <masonf@chromium.org>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1067796}

html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow.html

@@ -214,6 +214,24 @@
   </template>
 </dialog>
 
+<dialog data-description="No autofocus, no delegatesFocus, slotted target">
+  <template class="turn-into-shadow-tree">
+    <button tabindex="-1">Focusable</button>
+    <slot></slot>
+    <button tabindex="-1">Focusable</button>
+  </template>
+  <button tabindex="-1" class="focus-me">Focusable</button>
+</dialog>
+
+<dialog data-description="Shadowroot on child, no autofocus, no delegatesFocus">
+  <div>
+    <template class="turn-into-shadow-tree">
+      <button tabindex="-1">Focusable</button>
+    </template>
+  </div>
+  <button tabindex="-1" class="focus-me">Focusable</button>
+</dialog>
+
 <script>
 for (const template of document.querySelectorAll(".turn-into-shadow-tree")) {
   const div = document.createElement("div");