Try web components. Proof of concept

js/index.esm.js

@@ -5,6 +5,8 @@
  * --------------------------------------------------------------------------
  */
 
+import Toa from './src/toa'
+
 export { default as Alert } from './src/alert'
 export { default as Button } from './src/button'
 export { default as Carousel } from './src/carousel'
@@ -17,3 +19,5 @@ export { default as ScrollSpy } from './src/scrollspy'
 export { default as Tab } from './src/tab'
 export { default as Toast } from './src/toast'
 export { default as Tooltip } from './src/tooltip'
+
+window.customElements.define('bs-toa', Toa)

js/index.umd.js

@@ -16,6 +16,7 @@ import Popover from './src/popover'
 import ScrollSpy from './src/scrollspy'
 import Tab from './src/tab'
 import Toast from './src/toast'
+import Toa from './src/toa'
 import Tooltip from './src/tooltip'
 
 export default {
@@ -32,3 +33,5 @@ export default {
   Toast,
   Tooltip
 }
+
+window.customElements.define('bs-toa', Toa)

js/src/base.js

@@ -0,0 +1,3 @@
+class Base extends HTMLElement {}
+
+export default Base

js/src/toa.js

@@ -0,0 +1,75 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v5.2.1): toa.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+import Base from './base'
+//
+// const TEMPLATE = '<slot></slot>'
+
+export default class Toa extends Base {
+  constructor() {
+    super()
+    this.autohide = this.getAttribute('autohide') !== 'false'
+    console.log(this.autohide) // eslint-disable-line no-console
+    this.classList.add('toast', 'bg-danger', 'p-2')
+    this.setAttribute('role', 'alert')
+    this.ariaLive = 'assertlive'
+    this.ariaAtomic = 'true'
+  }
+
+  show() {
+    this.classList.add('show')
+    this.style.display = 'block'
+    if (this.autohide) {
+      setTimeout(() => this.hide(), this.constructor.properties.delay.value)
+    }
+  }
+
+  hide() {
+    if (this._hasMouseInteraction) {
+      setTimeout(() => this.hide(), this.constructor.properties.delay.value)
+      return
+    }
+
+    this.style.removeProperty('display')
+    this.classList.remove('show')
+  }
+
+  // Button's properties.
+  static get properties() {
+    return {
+      animation: {
+        type: Boolean,
+        value: true
+      },
+      autohide: {
+        type: Boolean,
+        value: true
+      },
+      delay: {
+        type: Number,
+        value: 3000
+      }
+    }
+  }
+
+  connectedCallback() {
+    this.show()
+
+    this.addEventListener('pointerenter', event => this._onInteraction(event, true))
+    this.addEventListener('pointerleave', event => this._onInteraction(event, false))
+  }
+
+  _onInteraction(event, isInteracting) {
+    switch (event.type) {
+      case 'pointerenter':
+      case 'pointerleave':
+        this._hasMouseInteraction = isInteracting
+        break
+      default:
+        break
+    }
+  }
+}

site/layouts/partials/home/masthead.html

@@ -1,6 +1,13 @@
 <div class="bd-masthead mb-3" id="content">
   <div class="container-xxl bd-gutter">
     <div class="col-md-8 mx-auto text-center">
+     <div class="m-2 p-3 bg-white">
+       <bs-toa class="border"><div class="toast-body bg-info mb-2">dddddd</div></bs-toa>
+       <bs-toa class="border" autohide="false"><div class="toast-body bg-primary">dddddd</div></bs-toa>
+
+       <hr>
+       <button class="btn btn-sm btn-primary" onclick="document.querySelector('bs-toa').show()">show again</button>
+     </div>
       <a class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none" href="https://blog.getbootstrap.com/2022/07/19/bootstrap-5-2-0/">
         <strong class="d-sm-inline-block p-2 me-2 mb-2 mb-lg-0 rounded-3 masthead-notice">New in v5.2</strong>
         <span class="text-muted">CSS variables, responsive offcanvas, new utilities, and more!</span>