JSFiddle - React, Tailwind, and code Playground

by Sergey Kulikov

HTML

<template id="component-template">
  <style>
    :host {
      display: block;
    }

    .container {
      overflow: hidden; /* remove this line and Shift + Tab works */
    }
  </style>
  <div class="container">
    <button>Broken :(</button>
    <input style="width: 250px" placeholder="Focus me and press Shift+Tab twice">
  </div>
</template>

<h1>overflow:hidden locks Shift+Tab within shadow root</h1>
<h2>Firefox 63 issue</h2>

<p>Cannot get out of shadow root using Shift + Tab when there is a wrapper with overflow set to hidden.</p>

<p>Steps to reproduce:</p>
<ul>
  <li>1. Focus the <code>input</code> in shadow root</li>
  <li>2. Press Shift + Tab to move focus to the button in same shadow root</li>
  <li>3. Press Shift + Tab again</li>
</ul>

<p>
Expected: focus moves out of the shadow root to previous element
<br>
Actual: focus moves back to the input in the same shadow root
</p>

<button>Working!</button>
<input style="width: 250px" placeholder="I'm not in the Shadow DOM and I'm happy!">

<component-with-shadow></component-with-shadow>

JavaScript

class ComponentWithShadow extends HTMLElement {

  connectedCallback() {
    let template = document.getElementById('component-template');
    let content = template.content.cloneNode(true);
    this.attachShadow({mode: 'open'});
    this.shadowRoot.appendChild(content); 
  }
}

customElements.define('component-with-shadow', ComponentWithShadow);