Hey Kevin,
Yes it is. You can leverage external CSS library in a similar way to the external JS library.
You need the code below in the JS of your widget. Here I referencing the https://getbootstrap.com/ library. It is possible to use others in the same way. I also attaching an example widgets which you can download and install in your instance to test.
customWidget-Example External CSS - Bootstrap.json (2.4 KB)
This is the output from a simple example:
Before Bootstrap CSS:
With Bootstrap CSS:
Code required in JS:
let urls = ["https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"];
loadStyles(urls);
async function loadStyles(...urls) {
for (const thisUrl of urls) {
console.log(`Loading style "${thisUrl}"...`);
const response = await fetch(thisUrl);
const responseBody = await response.text();
const styleElm = document.createElement("style");
const inlineStyle = document.createTextNode(responseBody);
styleElm.appendChild(inlineStyle);
document.body.appendChild(styleElm);
console.log(`Style "${thisUrl}" successfully loaded`);
}
}