Bootstrap Web Components

Hi,

I was wondering if there have been any discussions on releasing a set of bootstrap web components; they seem to be the perfect use case for something like bootstrap.

Web Components are a set of standards that allows developers to make reusable, encapsulated and modular components using standards based APIs. More so, web components are reusable in almost any framework.

With the recent anouncement that support for IE11 will be dropped, polyfills won’t even be necessary; it seems like the perfect time.

Instead of applying classes, bootstrap web components could be usable like so:

<bootstrap-button></bootstrap-button>
<bootstrap-button raised></bootstrap-button>
<bootstrap-button raised warning></bootstrap-button>
<bootstrap-button raised warning large></bootstrap-button>

etc.

There is already a community effort by @morbidick : https://github.com/morbidick/bootstrap-webcomponents

Some examples of existing web component catalogs are:

• Vaadin’s components:

• Polymer’s paper-elements:

If you’re interested in learning more, you can find a ton of information at:

• webcomponents-the-right-way maintained by @web-padawan

Recommendations/tooling:

• open-wc

As well as these blogs:

• Let’s Build Web Components! by @bennypowers
• Web Components: from Zero to Hero by yours truly.

[Johann-S]

I agree WebComponents can suits very well to Bootstrap, but our v5 is a huge move for us (due to the removal of jQuery) so we won’t begin that in our v5, but maybe in a v6 that’s possible

[web-padawan]

Thanks for starting the discussion. I recall lots of tweets of this kind under Bootstrap v5 announcements. Dropping IE11 is a good opportunity to introduce web components, too.

It has its drawbacks and edge cases, though (simple case: :slotted CSS selector is quite limited, e.g. for styling links in alerts it will require to make them direct children).