<style>

</style>

​

<x-element></x-element>

​

<script>

customElements.define('x-focus', class extends HTMLElement {

  constructor() {

    super(); // always call super() first in the ctor.

​

    const root = this.attachShadow({mode: 'open', delegatesFocus: true});

    root.innerHTML = `

      <style>

        :host {

          display: flex;

          border: 1px dotted black;

          padding: 16px;

        }

​

      </style>

      <div>x-focus inside x-element's shadow dom</div>

      <input type="text" placeholder="Input inside shadow dom">`;

​

    // Know the focused element inside shadow DOM:

    this.addEventListener('focus', function(e) {

      console.log('Active element (inside shadow dom):',

                  this.shadowRoot.activeElement);

    });

  }

});

  customElements.define('x-element', class extends HTMLElement {

  constructor() {

    super(); // always call super() first in the ctor.

​

    const root = this.attachShadow({mode: 'open', delegatesFocus: true});

    root.innerHTML = `

      <style>

        :host {

          display: flex;

          border: 1px dotted black;

          padding: 16px;

        }

      </style>

      <div>x-element</div>

      <x-focus></x-focus>`;

  }

});

</script>