menus don't hide when clicking outside them in Svelte.

[MarkLyck]

In the examples on the website, all of the menus will hide if you click outside of them.

However when I copy the same code to my svelte app, the menus will open and just stay opened wherever I click. The only thing that will close them is clicking on the button that toggles the menu.

Here's a code example. I use mux-video but everything else is just copied from the advanced example player.

<media-controller bind:this={mediaController} class="max-h-screen">
      <mux-video
        playback-id={playbackId}
        slot="media"
      />
      <img
        slot="poster"
        srcset="
            https://image.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/thumbnail.webp?time=13&width=640 640w,
            https://image.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/thumbnail.webp?time=13&width=960 960w,
            https://image.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/thumbnail.webp?time=13&width=1280 1280w,
            https://image.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/thumbnail.webp?time=13 1920w
          "
        alt="Elephants Dream"
        decoding="async"
      />
      <media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
      <media-settings-menu anchor="auto" hidden>
        <media-settings-menu-item>
          Speed
          <media-playback-rate-menu slot="submenu" hidden>
            <div slot="title">Speed</div>
          </media-playback-rate-menu>
        </media-settings-menu-item>
        <media-settings-menu-item>
          Quality
          <media-rendition-menu slot="submenu" hidden>
            <div slot="title">Quality</div>
          </media-rendition-menu>
        </media-settings-menu-item>
        <media-settings-menu-item>
          Captions
          <media-captions-menu slot="submenu" hidden>
            <div slot="title">Captions</div>
          </media-captions-menu>
        </media-settings-menu-item>
        <media-settings-menu-item>
          Audio
          <media-audio-track-menu slot="submenu" hidden>
            <div slot="title">Audio</div>
          </media-audio-track-menu>
        </media-settings-menu-item>
      </media-settings-menu>
      <media-control-bar>
        <media-play-button></media-play-button>
        <media-seek-backward-button seekoffset="5"></media-seek-backward-button>
        <media-seek-forward-button seekoffset="15"></media-seek-forward-button>
        <media-mute-button></media-mute-button>
        <media-time-display></media-time-display>
        <media-time-range></media-time-range>
        <media-duration-display></media-duration-display>
        <media-settings-menu-button></media-settings-menu-button>
        <media-pip-button></media-pip-button>
        <media-cast-button></media-cast-button>
        <media-airplay-button></media-airplay-button>
        <media-fullscreen-button></media-fullscreen-button>
      </media-control-bar>
    </media-controller>

This happens with all menus not just the settings one.

If I click outside the video, and then click inside again, then the menu will hide if I click anywhere on the video.