[w3c/webcomponents] Disabling tabindex across potentially many shadow roots (#520)

I'm working on an offscreen slide-in navigation panel which may contain several focusable elements and needs to animate at 60fps. To achieve the 60fps animation, the drawer has been promoted to a layer using will-change and transformed offscreen. Unfortunately this means all of the focusable children are still interactive.

I could set the drawer to visibility: hidden when it's offscreen (thus fixing the focus issue) but then I'd lose my fancy layer and sacrifice some of my animation perf. On a very large drawer (like the kind on m.facebook.com) this repainting could be very expensive.

An alternative is to do something like:
```
document.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]');
```
And loop over all potentially focusable items, setting each to tabindex=-1 when the drawer is offscreen. This may be the faster of the two approaches but it gets difficult if any of those children contain Shadow DOM. Now I need to recurse through each shadow root and again look for either focusable children or more shadow roots.

So there's a few things at play here: how can I remove an entire shadow tree from the tab order? And, if there was such a mechanism, why not let me do it for regular trees as well so I don't need the crazy querySelector string?

cc @alice @paullewis @paulirish

---
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/520