mqtt over tls using mqtt.js

I have a eclipse-mosquitto container running on a server which I want to connect to over wss.

I have the following configuration on the server

allow_anonymous false
password_file /mosquitto/config/passwd

persistence true
persistence_location /mosquitto/data/

log_type all
log_dest file /mosquitto/log/mosquitto.log
log_dest stdout

listener 1883
protocol mqtt

listener 8083
protocol websockets
websockets_log_level all
socket_domain ipv4

listener 8883
protocol mqtt
require_certificate false
cafile /mosquitto/cert/ca.crt
certfile /mosquitto/cert/server.crt
keyfile /mosquitto/cert/server.key
tls_version tlsv1.2

listener 8084
protocol websockets
require_certificate false
cafile /mosquitto/cert/ca.crt
certfile /mosquitto/cert/server.crt
keyfile /mosquitto/cert/server.key
tls_version tlsv1.2
websockets_log_level all
socket_domain ipv4

user mosquitto

And the following docker-compose config

  mosquitto:
    container_name: mosquitto
    image: eclipse-mosquitto:latest
    restart: unless-stopped
    hostname: "${ENV_TYPE}-mosquitto"
    ports:
      - 1883:1883
      - 8883:8883
      - 8083:8083
      - 8084:8084
    volumes:
      - ./volumes/mosquitto/data:/mosquitto/data
      - ./volumes/mosquitto/log:/mosquitto/log
      - ./volumes/mosquitto/config:/mosquitto/config
      - ./volumes/mosquitto/cert:/mosquitto/cert

And using MQTT Explorer I am able to connect just fine over tls

mqtt conection

But when trying to connect to it using the mqtt.js library I fail to get a wss connection. ws over port 8083 works just fine, just as connecting to a a different broker over wss.

<body>
  <script src="https://unpkg.com/mqtt/dist/mqtt.js"></script>
  <script>
    const id = Math.random().toString(36).substring(7);
    const topic = "topic";
    const connection = "wss://username:[email protected]:8084"
    // const connection = "ws://username:[email protected]:8083" // Works
    // const connection = "wss://public:[email protected]" // Works
    const client = mqtt.connect(connection, {
      rejectUnauthorized: false,
    });

    client.on("message", messageReceived);
    client.on("connect", function () {
      println("connected!");
      client.subscribe("topic");
      client.publish("topic", "Hello from HTML");
    });
    client.on("error", function (error) {
      println("Error: " + error);
    });
    client.on('end', function() {
      println("Disconnected");
    })


    function messageReceived(topic, message) {
      println(topic + ": " + message);
    }
    function println(message) {
      const p = document.createElement("p");
      p.textContent = message;
      document.querySelector("body").append(p);
    }
  </script>
</body>