import * as internal from '../../src/internal.js';
import * as template from '../../src/template.js';
import Button from '../../src/Button.js';

class FocusVisibleTest extends Button {
  get [internal.template]() {
    return template.concat(
      super[internal.template],
      template.html`
        <style>
          #inner {
            background: #888;
            border-radius: 3px;
            color: #eee;
            font-family: inherit;
            font-size: inherit;
            font-style: inherit;
            font-weight: inherit;
            outline: none;
            padding: 6px 12px;
          }
        </style>
      `
    );
  }

  connectedCallback() {
    super.connectedCallback();
    this.setAttribute('tabindex', '0');
  }
}

customElements.define('focus-visible-test', FocusVisibleTest);
export default FocusVisibleTest;

@@ -427,328 +427,68 @@
     
-font-family: inherit;%0A            font-size: inherit;%0A            font-style: inherit;%0A            font-weight: inherit;%0A            outline: none;%0A            padding: 6px 12px;%0A          %7D%0A        %3C/style%3E%0A      %60%0A    );%0A  %7D%0A%0A  connectedCallback() %7B%0A    super.connectedCallback();%0A    this.setAttribute('tabindex', '0'
+padding: 6px 12px;%0A          %7D%0A        %3C/style%3E%0A      %60%0A    
 );%0A 

Simplify demo.