capture event phase nested

HTML

<script>
  class ChildExample extends HTMLElement {
    static get is() { return 'child-example'; }
    connectedCallback() {
      this.attachShadow({mode:'open'}).innerHTML = `
<style>
:host {
display: block;
}
  </style>
<button on-click="fireEvent">
CLICK ME
  </button>
`;
      this.shadowRoot.querySelector('button').addEventListener('click', this.fireEvent.bind(this));
      this.addEventListener('test', e => {
        debugger;
        console.log('Child Capture');
        // e.stopPropagation();
      }, true);
      this.addEventListener('test', e => {
        console.log('Child Bubble');
        // e.stopPropagation();
      }, false);
    }
    fireEvent() {
      this.dispatchEvent(new CustomEvent('test', {
        detail: {},
        bubbles: true,
        composed: true
      }));
    }
  };
  customElements.define(ChildExample.is, ChildExample);
</script>
<script>
  class ParentExample extends HTMLElement {
    static get is() { return 'parent-example'; }
    connectedCallback() {
      this.attachShadow({mode:'open'}).innerHTML = `
<style>
:host {
display: block;
}
  </style>
<child-example></child-example>
`;
      this.addEventListener('test', e => {
        debugger;
        console.log('Parent Capture');
        // e.stopPropagation();
      }, true);
      this.addEventListener('test', e => {
        console.log('Parent Bubble');
        // e.stopPropagation();
      }, false);
    }
  };
  customElements.define(ParentExample.is, ParentExample);
</script>

<parent-example></parent-example>

CSS

body {
  font-family: sans-serif;
}