[SalesForce] Lightning Web Components and CSS Frameworks

Has anyone successfully implemented any non-SLDS CSS Frameworks in Lightning Web Components? I can successfully utilize components that are CSS only in a framework like Bootstrap or Foundation, but anything that relies on JavaScript to operate is a no-go.

I figure I'm running into a similar issue with the shadow DOM that is highlighted on this Polymer post, but I'll admit that I have no idea how any workaround in Polymer translates to LWC.

Here is an example of a LWC that displays a standard Bootstrap Alert, which renders and is styled correctly, and a Bootstrap Nav which is styled correctly but does not function. All related libraries have been added as public Static Resources.

Both examples were pulled directly from the Bootstrap website:
https://getbootstrap.com/docs/4.3/components/alerts/
https://getbootstrap.com/docs/4.3/components/navs/

JavaScript

import { LightningElement } from 'lwc';
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import jquery from '@salesforce/resourceUrl/jquery';
import bootstrap from '@salesforce/resourceUrl/bootstrap';
import popper from '@salesforce/resourceUrl/popper';

export default class Test extends LightningElement {

    renderedCallback() {

        Promise.all([
            loadStyle(this, bootstrap + '/css/bootstrap.css'),
            loadScript(this, bootstrap + '/js/bootstrap.js'),
            loadScript(this, popper),
            loadScript(this, jquery)     
        ])
            .then(() => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Third-Party Libraries Loaded',
                        variant: 'success',
                    }),
                );
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error Loading Third-Party Libraries',
                        message: error.message,
                        variant: 'error',
                    }),
                );
            });

    }
}

HTML

<template>
    <div class="container">
        <div class="alert alert-primary" role="alert">
            A simple primary alert—check it out!
        </div>
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                <p>Tab 1</p>
            </div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                <p>Tab 2</p>
            </div>
            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                <p>Tab 3</p>
            </div>
        </div>
    </div> 
</template>

Any help would be appreciated.

Best Answer

Salesforce Strongly advises against using Bootstrap (both, css and js files):

LockerService and Lightning Container Component: Securely Using Third-Party Libraries in Lightning Components

You may also want to reconsider the use of UI libraries like Bootstrap and jQuery UI. Although these libraries provide useful components, they have their own UI identity that can clash with the Lightning Experience identity. The Base Lightning Components and the Lightning Design System offer similar capabilities while providing a consistent user experience.

Also, note that not all 3rd party libraries (actually, most) are not supported.

you can refer to this post:

Which external Javascript libraries work with Lightning Locker Service?

Related Topic