JSFiddle - React, Tailwind, and code Playground

HTML

<p>
Click on the right input, then the left, then the dialog input, then the left. Then wait.
</p>
<p>
Question: How is the outside the last focused element? And why then does it focus to bar. Focus is synchronous, right?
</p>
<ui-example></ui-example>
<input id="outside" tabIndex="0" type="text">

JavaScript

class UIExample extends HTMLElement {
	constructor() {
  	super();
    this.tabIndex = "";
  	this.attachShadow({mode: 'open', delegatesFocus: true });
    this.shadowRoot.innerHTML = `<input id="inside" type="text"><dialog id="dialog"><p>test</p><input type="text"></dialog>`
  
    this.addEventListener('blur', e => {
      console.log('blur web component');
    });
    this.shadowRoot.getElementById('inside').addEventListener('blur', e => {
      console.log('blur input inside');
    });

    this.shadowRoot.getElementById('inside').addEventListener('pointerdown', async e => {
      this.shadowRoot.getElementById('dialog').show();
      setTimeout(() => {
        //this.focus();
        this.shadowRoot.getElementById('inside').focus();
        this.shadowRoot.getElementById('dialog').close();
       }, 5000);
    });
  }
}
customElements.define('ui-example', UIExample);

document.getElementById('outside').addEventListener('blur', e => {
	console.log('blur input outside');
});