capture event phase slotted

by Michael Stramel

HTML

<base href="https://polygit.org/components/">
<!-- Load Custom Elements es5 adapter -->
<!-- <script src="webcomponentsjs/custom-elements-es5-adapter.js"></script> -->
<!-- Load polyfills; note that "loader" will load these async -->
<!-- <script src="webcomponentsjs/webcomponents-lite.js"></script> -->
<!-- <script src="webcomponentsjs/webcomponents-shadycss.js"></script> -->
<!-- <script src="webcomponentsjs/webcomponents-loader.js"></script> -->
<link href="polymer/polymer-element.html" rel="import">

<dom-module id="child-example">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <button on-click="fireEvent">
      CLICK ME
    </button>
  </template>
  <script>
    class ChildExample extends Polymer.Element {
    static get is() { return 'child-example'; }
    ready() {
      super.ready();
      this.addEventListener('test', () => {
        alert('Child Capture');
        // e.stopPropagation();
      }, true);
      this.addEventListener('test', () => {
        alert('Child Bubble');
        // e.stopPropagation();
      }, false);
    }
    fireEvent() {
      this.dispatchEvent(new CustomEvent('test', {
        detail: {},
        bubbles: true,
        composed: true
      }));
    }
  };
  customElements.define(ChildExample.is, ChildExample);
  </script>
</dom-module>

<dom-module id="parent-example">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <slot></slot>
  </template>
  <script>
  class ParentExample extends Polymer.Element {
  	static get is() { return 'parent-example'; }
    ready() {
      super.ready();
      this.addEventListener('test', () => {
      	alert('Parent Capture');
        // e.stopPropagation();
      }, true);
      this.addEventListener('test', () => {
      	alert('Parent Bubble');
        // e.stopPropagation();
      }, false);
    }
  };
  customElements.define(ParentExample.is, ParentExample);
  </script>
</dom-module>

<parent-example>
 ...

CSS

body {
  font-family: sans-serif;
}