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

The discussion at TPAC was that basically we navigate focusable elements via TAB presses in a way that those within the same shadow root including distributed nodes are grouped, and in order of composed tree?

e.g.
```html
<my-nameinput>
    <#shadow-root>
         Firstname: <slot name="firstname"></slot>
         Lastname: <slot name="lastname"></slot>
    </#shadow-root>
    <input id="first" slot="firstname">
    <input id="last" slot="lastname">
</my-nameinput>
```

will be rendered as

```html
<my-nameinput>
     Firstname: <input id="first">
     Lastname: <input id="last">
</my-nameinput>
```

But if the order in the `#shadow-root` is flipped, rendering will be

```html
<my-nameinput>
     Lastname: <input id="last">
     Firstname: <input id="first">
</my-nameinput>
```

With the current spec, TAB navigation order is fixed for both, `#first` -> `#last`, as in the order of
the document DOM tree. But preferably, the order should be `#first` -> `#last` for the former and `#last` -> `#first` for the latter.

Is this the bottomline?
I feel we can define this without nested browsing context, just with composed tree.

(but once `tabIndex` is involved, things may get complicated, like #126)

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