WebComponentsに外部（Shadow DOMの外）からイベントリスナーを追加する

やりたいこと

WebComponetには手を触れず外からイベントを追加する。

結論

querySelectorとかgetElemetByXxxで要素を特定してshadowRootでアクセスしてよしなにする。

コード

<sample-elem id="hoge"></sample-elem>

class sampleElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({
      mode: 'open'
    });
    this.shadowRoot.innerHTML = `
<style>
p#ev1 { color: red; }
</style>
<p id='ev1'>alert</p>
<p>hoge</p>
`;
    this.ev1 = this.shadowRoot.getElementById('ev1');
  }

  connectedCallback() {
    this.addEventListener('click', this.onClickAll);
    this.ev1.addEventListener('click', this.onClickP);
  }

  disconnectedCallback() {
    this.removeEventListener('click', this.onClickAll)
    this.ev1.removeEventListener('click', this.onClickP);
  }

  onClickAll(e) {
    console.log('onClickAll !');
  }

  onClickP(e) {
    console.log('onClickP !');
  }
}
customElements.define('sample-elem', sampleElement);

// shadow domの外からイベントリスナーを追加
var shadowDom = document.querySelector('sample-elem').shadowRoot;
shadowDom.querySelector("p#ev1").addEventListener('click', () => {alert('#ev1')});

留意点

2020/01/20時点だとElement.shadowRootは実験的な機能です。