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.