How can I show modal on page load?

I have a page with a modal window. I can show and hide this modal with a button and the right data-bs- attributes.

Now, What I want is to have the modal shown on page load. It seems the only proper way to do it is to get the modal element in JS and call its .show() method.

But I don't know how to do it on a qweb-only template. Is there a way ?

<template id="my_template" name="Hello there">
    <t t-call="portal.portal_layout">
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="my_modal">
            Show Modal
        </button>
        
        <!-- I want this modal to pop up on page load as weel as being able to toggle it with my button -->
        <div id="my_modal" tabindex="-1" role="dialog" class="modal fade">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="my_modal_title">Hi</h5>
                        <button type="button" class="btn text-danger" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true"><i class="fa fa-close"/></span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Content ...
                    </div>
                </div>
            </div>
        </div>
    </t>
</template>

Apparently it's not a problem to introduce scripts with Qweb (or simply include it in your markup). I see no reason to deviate from best practice using Bootstrap's methods. Doing so should result in basically this (note the embedded script located after the Bootstrap library link):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

<script>
const myModal = new bootstrap.Modal(document.getElementById('exampleModal'));
myModal.show();
</script>