Click event.path: propagation in open mode from Shadow dom

Example extracted from https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b and https://developers.google.com/web/fundamentals/web-components/shadowdom

by Julien Roche

HTML

<script src="https://cdn.jsdelivr.net/npm/@webcomponents/[email protected]/custom-elements.min.js"></script>
<fancy-tabs background>
  <button slot="title">Tab 1</button>
  <button slot="title" selected>Tab 2</button>
  <button slot="title">Tab 3</button>
  <section>content panel 1</section>
  <section>content panel 2</section>
  <section>content panel 3</section>
  <footer>
    <fancy-tabs-footer></fancy-tabs-footer>
  </footer>
</fancy-tabs>

<br />
<br />

<section>
  <header>Click output:</header>
  <ul>
    <li></li>
  </ul>
</section>

CSS

body {
    margin: 0;
  }

Babel + JSX

const ulElement = document.querySelector('ul');
document.body.addEventListener('click', (event) => {
	ulElement.textContent = '';

  for(const path of event.path) {
  	const label = path.tagName ? path.tagName : '';
    const liElement = document.createElement('li');
    liElement.textContent = label;
    ulElement.appendChild(liElement);
  }
}, false);

let selected_ = null;
  
// See https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel

customElements.define('fancy-tabs-footer', class extends HTMLElement {
constructor() {
    super(); // always call super() first in the ctor.
    // Create shadow DOM for the component.
    let shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
      <p>A simple content for the footer (shadow dom content)</p>
    `;
  }
});
  
customElements.define('fancy-tabs', class extends HTMLElement {
  constructor() {
    super(); // always call super() first in the ctor.
    // Create shadow DOM for the component.
    let shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
      <style>
        :host {
          display: inline-block;
          width: 650px;
          font-family: 'Roboto Slab';
          contain: content;
        }
        :host([background]) {
          background: var(--background-color, #9E9E9E);
          border-radius: 10px;
          padding: 10px;
        }
        #panels {
          box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
          background: white;
          border-radius: 3px;
          padding: 16px;
          height: 250px;
          overflow: auto;
        }
        #tabs {
          display: inline-flex;
          -webkit-user-select: none;
          user-select: none;
        }
        #tabs slot {
          display: inline-flex; /* Safari bug. Treats <slot> as a parent */
        }
        /* Safari does not support #id prefixes on ::slotted
           See https://bugs.webkit.org/show_bug.cgi?id=160538 */
        #tabs ::slotted(*) {
          font:...