Shadow DOM and Gesture Events in Safari

HTML

<p>
  The custom element below does not allow the gesture event to cross the shadow boundary, meaning the default pinch behavior is not prevented in Safari.
</p>
<gesture-example></gesture-example>

JavaScript

// define a simple custom element
customElements.define('gesture-example', class extends HTMLElement {
  constructor() {
    super();
    this._shadowRoot = this.attachShadow({mode: 'open'});
    this._shadowRoot.innerHTML = '<p style="padding: 5px; border: 1px solid red; width: 200px; height: 200px;">Pinching in here will trigger a zoom in Safari, despite the event listeners on the document.</p>';
  }
});

// prevent standard safari pinch behavior
document.addEventListener('gesturestart', (ev) => ev.preventDefault());
document.addEventListener('gesturechange', (ev) => ev.preventDefault());