Add the ability to create elements using Bootstrap modules.

[tacosontitan]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

I would like the ability to create Bootstrap elements from the modules, for example, with the toast element:

const bootstrap = require('bootstrap');
const toastContainer = document.getElementById('toast-container');
...
catch (exception) {
    // For clarity purposes in this proposal.
    let title = 'Error';
    let message = exception;
    
    // Build the element using the module.
    let toast = new bootstrap.Toast(title, message);
    toast.iconUrl = './someIcon.png';
    toast.timestamp = new Date();
    toast.autoDestroyIn = 10000;

    // Append the toast to the container.
    toast.appendTo(toastContainer);
}

Auto-Destruction

This is not a requirement but would be a great feature if all modules implemented it so that we could specify that the element should be removed after so many milliseconds. By default, the element would live forever. I believe a very basic implementation would be something like:

if (this.autoDestroyIn)
    setTimeout(destroy, this.autoDestroyIn);

Motivation and context

In Electron apps, it would be nice to generate elements such as toasts, list items, modals, etc within the preload and other renderer scripts. Currently, elements must be generated manually in a rather verbose way.

[WinterSilence]

It's very hard to complex components like as card.
You can use <template> or template literals to generate components in JS:

const bsToast = content => `<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">${content}</div>`;
const bsBasicToast = (header, body) => bsToast(`<div class="toast-header">${header}</div><div class="toast-body">${body}</div>`);
const bsShortToast = body => bsToast(`<div class="toast-body">${body}</div>`);

or create custom HTML elements:

<bs-toast>
     <bs-toast-header>...</bs-toast-header>
     <bs-toast-body>...</bs-toast-body>
</bs-toast>

[GeoSot]

Just a note. https://github.com/twbs/bootstrap/blob/main/js/src/util/template-factory.js was extracted from tooltip functionality, for this cause.

Just waiting to be utilized :)

[WinterSilence]

@GeoSot

Just waiting to be utilized :)

what you mean?

BS5 not support legacy browsers, then why not use custom elements? or something like Mithril components

[GeoSot]

then why not use custom elements

Although I love the idea (and it is been suggested in another issue), sure a am not the right person to take a big decision like this

Until we decide to make a radical change like this, on #34519 , I tried to prepare a base for future usage, that gives the ability to use templates on BS components.

[WinterSilence]

@GeoSot don't think what this is good solution. need wrap current classes in custom elements.

[ffoodd]

Custom elements would be a breaking change, thus this would probably be the first step for V6.

But that's not possible for v5, whereas the template factory already exists.

[WinterSilence]

@ffoodd

wrap current classes in custom elements

not BC, I'm mean something like proxy pattern

[GeoSot]

Probably you may try to propose your ideas, making a PR as a proof of concept. You never know, it may be liked out there.
But please keep in mind to maintain a vital amount of backward compatibility.
It may be a great overhead for many devs in order to keep their projects updated