What is the current behavior?

Server side rendering fails when the component has a event listener attached to it. e.g.:

import { Component, Element, Host, h, Listen } from '@stencil/core';

@Component({
  tag: 'my-whatever-component',
  styleUrl: 'my-whatever-component.css',
  shadow: true,
})
export class MyWhateverComponent {
  @Element() hostElement;
  private slotRef: HTMLSlotElement;

  @Listen('click', { capture: true }) // Crashes, incorrect binding in hydrate index.js
  handleKeyPress(): void {
  }

  render() {
    return (
      <Host>
        <slot ref={(el: HTMLSlotElement) => this.slotRef = el}></slot>
      </Host>
    );
  }
}

Culprit here was that addHostEventListeners was called without this attached to it, causing the function to throw an error and stopping the vdom annotation process to continue, leaving some nested components without annotations which caused double render.

GitHub Issue Number: fixes #5869

What is the new behavior?

Attach this context and require this in the TypeScript definition so this error can be caught during development.

Documentation

n/a

Does this introduce a breaking change?

• Yes
• No

Testing

Added an e2e test for this.

Other information

n/a