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

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.

Bug: 383230, 670130, 1292852
Change-Id: I13995197f1942aa356cab0f3b41a0e226d1d170d

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

@@ -171,10 +171,10 @@
 <dialog data-description="Autofocus inside shadow tree, yes delegatesFocus, sibling after">
   <template class="turn-into-shadow-tree delegates-focus">
     <button tabindex="-1">Focusable</button>
-    <button tabindex="-1" autofocus>Focusable</button>
+    <button tabindex="-1" autofocus class="focus-me">Focusable</button>
     <button disabled>Non-focusable</button>
   </template>
-  <button tabindex="-1" class="focus-me">Focusable</button>
+  <button tabindex="-1">Focusable</button>
 </dialog>
 
 <dialog data-description="Autofocus inside shadow tree, no delegatesFocus, no siblings">
@@ -203,6 +203,24 @@
   <button tabindex="-1" class="focus-me">Focusable</button>
 </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");