2

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.

  • its not clear what your question is, you mean to override the CSS of a namespaced lighting web component? if so - it is not possible. – glls May 6 at 16:51
  • I'm trying to use components from a CSS Framework like Bootstrap in a custom Lightning Web Component, rather than using SLDS components. For example a dropdown or nav. – Michael Richmond May 6 at 16:55
  • I have imported the CSS and Javascript required using the recommended approach which you have linked to, however any component that requires Javascript to function will not work. So for example, if I create a Bootstrap Nav I will end up with a properly styled Nav that does not function. – Michael Richmond May 6 at 17:01
1

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?

  • LockerService was my original thought as well, but it works fine with Aura Components, and you can work around the odd issues by namespacing your CSS. developer.salesforce.com/blogs/developer-relations/2015/05/… – Michael Richmond May 6 at 19:27
  • in that case, are there any errors in your browser dev tools? – glls May 6 at 19:28
  • No errors in the browser. The link that I posted in the original post describes a similar issue with Polymer and it was Shadow DOM related, which makes sense. However, I was wondering if someone has found a workaround that would work with LWC. – Michael Richmond May 6 at 19:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.