JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <body>
    <my-custom-button
      onclick="alert('YOU SHOULD SEE THIS')">
      CLICK ME (NO THING WILL HAPPEN IF YOU ARE USING SAFARI iOS)
    </my-custom-button>
    
    <script>
      // register a webcomponent
      customElements.define('my-custom-button', class extends HTMLElement {
        constructor() {
          super();
          const shadow = this.attachShadow({ mode: 'open' });
          shadow.innerHTML = `<span style="background-color: blue;">BUTTON: <slot>Click here!</slot></span>`
        }
      });

      const customElement = document.querySelector('my-custom-button');

      // attach a listener to the shadowRoot
      // this is introducing the issue
      // if you comment it, it will fix the problem
      customElement.shadowRoot.addEventListener('click', () => {
        alert('YOU SHOULD SEE THIS AS WELL :)');
      });
    </script>
  </body>
</html>