tabIndexes inside shadowRoot breaks the tab ordering. ShadyDom seems to solve it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!--
    <script>
        if (window.customElements) window.customElements.forcePolyfill = true;
        ShadyDOM = { force: true };
        ShadyCSS = { shimcssproperties: true };
    </script>
    <script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
    -->
    <link rel="stylesheet" href="style.css">
 </head>
  <body>
    <input type="checkbox" name="tabindex"> Define tabindex randomly for custom-element contents<br><br>

    <span>container-element</span>
    <container-element>
      <custom-element tabindex="0"></custom-element>
      <custom-element tabindex="0"></custom-element>
      <custom-element tabindex="0"></custom-element>
      <custom-element tabindex="0"></custom-element>
      <custom-element tabindex="0"></custom-element>
    </container-element>
    <hr>
    <span>container-element</span>
    <container-element>
      <custom-element tabindex="0"></custom-element>
      <custom-element tabindex="0"></custom-element>
      <custom-element tabindex="0"></custom-element>
      <custom-element tabindex="0"></custom-element>
      <custom-element tabindex="0"></custom-element>
    </container-element>

    <script src="script.js"></script>
  </body>
</html>

document.querySelector("input").addEventListener("change", event=> {
  document.querySelectorAll("custom-element").forEach(element=> {
    const mightFocusable = element.shadowRoot.querySelector("div");
    if(event.target.checked && Math.random() > 0.5) {
      mightFocusable.tabIndex = "0";
      mightFocusable.innerText = "content is focusable"
    } else {
      mightFocusable.removeAttribute("tabindex");
      mightFocusable.innerText = "content is NOT focusable"
    }
  });
});

window.customElements.define('container-element', class extends HTMLElement {
  constructor() {
      super();
      const tmpl = document.createElement('template');
      tmpl.innerHTML = `
        <style>
        :host { 
          display: block;
          padding: 8px;
          display: inline-block;
          border: 1px solid orange;
        }
        </style>
        <slot></slot> 
      `;
      if (window.ShadyCSS) {
        window.ShadyCSS.styleElement(this);
        window.ShadyCSS.prepareTemplate(tmpl, "container-element");
      }
  
      const shadowRoot = this.attachShadow({mode: 'open'});
      shadowRoot.appendChild(tmpl.content);
  }
});

window.customElements.define('custom-element', class extends HTMLElement {
  constructor() {
      super();
      const tmpl = document.createElement('template');
      tmpl.innerHTML = `
        <style>
        :host { 
          display: block;
          padding: 8px;
        }
        div:focus {
          background: red;
        }
        </style>
        <div>content is NOT focusable</div> 
      `;
      if (window.ShadyCSS) {
        window.ShadyCSS.styleElement(this);
        window.ShadyCSS.prepareTemplate(tmpl, "custom-element");
      }
      
      const shadowRoot = this.attachShadow({mode: 'open'});
      shadowRoot.appendChild(tmpl.content);
  }
});

custom-element {
  display: inline-block;
  border: 1px solid green;
} 
custom-element:focus {
  background: blue;
}