Re: [webcomponents] Update Section 6.2 Focus Navigation to reflect TPAC discussion (#375)

Let's say we have the following DOM (nobody should be setting `tabindex` like this here but I can't come up with a better example for now):
```html
<contect-card>
    Name first: <input id="first" slot="name" tabindex="1">
    Middle name: <input id="middle" slot="name" tabindex="4">
    Last name: <input id="last" slot="name" tabindex="2"><br>
    Email: <input id="email" tabindex="3">
</contect-card>
<input id="search" type="search" tabindex="5">
```

and let's say `contect-card`'s shadow DOM is defined as follows:
```html
<dl>
    <dt>Email</dt>
    <dd><slot name="email"></slot></dd>
    <dt>Name</dt>
    <dd><slot name="name"></slot></dd>
</dl>
```

Then the composed three will look like
```html
<my-nameinput>
    <dl>
        <dt>Email</dt>
        <dd><input id="first" slot="name" tabindex="1"
        ><input id="middle" slot="name" tabindex="4"
        ><input id="last" slot="name" tabindex="2"></dd>
        <dt>Name</dt>
        <dd><input id="email" tabindex="3"></dd>
    </dl>
</my-nameinput>
<input id="search" type="search" tabindex="5">
```

In this composed tree, the tab focusing order should be `#first`, `#last`, `#middle`, `#email`, then `#search` because shadow root and slot each defines its own focus scope/group.

---
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/375#issuecomment-178630606