unsafeCSS works excellently with Bootstrap 5 CSS: rollup-plugin-lit-css vs unsafeCSS #2222

nemethmik · 2021-10-04T23:53:54Z

nemethmik
Oct 4, 2021

I have experimenting with unsafeCSS and Bootstrap 5 and so far I found them working brilliantly together:

//import "bootstrap/dist/css/bootstrap.min.css"
import bootstrapcss from "bootstrap/dist/css/bootstrap.min.css"
import {html, css, LitElement, TemplateResult, unsafeCSS} from "lit"
import {customElement} from "lit/decorators.js"
import {MobxReactionUpdate} from "@adobe/lit-mobx"

class BootBase extends LitElement {
  static styles = [unsafeCSS(bootstrapcss)]
}
//MobiX is needed only for elements contacted to the app state store
@customElement("boot-app")
class BootApp extends MobxReactionUpdate(BootBase) {
  static styles = [...BootBase.styles, css`:host{text-align: center;}`]
  override render():TemplateResult { return html`
    <h1>Hello BootStrap in Shadow DOM!</h1>
    <button type="button" class="btn btn-primary">A Bootstrap Button</button>
  `}
  //override createRenderRoot() {return this}
}
declare global { interface HTMLElementTagNameMap { "boot-app": BootApp}}

The root of my experimental web application is a custom element:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite Bootstrap Lit App</title>
  </head>
  <body>
    <boot-app></boot-app>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Before that I had some experimenting with rollup-plugin-lit-css, but I wasn't able to get it working, TypeScript was pretty reluctant to accept the type incompatibility:

  import { LitElement, customElement, html } from 'lit-element';
  import style from './css-in-css.css';
  @customElement('css-in-css')
  class CSSInCSS extends LitElement {
    static get styles() {
      return [style]; //TYPESCRIPT didn't like THIS at all!
    }
    render() {return html`<h1>It's Lit!</h1>`}
  }

So, my question, what benefits rollup-plugin-lit-css would provide vs unsafeCSS, if I were able to make it working?
As I wrote unsafeCSS works excellently.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

unsafeCSS works excellently with Bootstrap 5 CSS: rollup-plugin-lit-css vs unsafeCSS #2222

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

unsafeCSS works excellently with Bootstrap 5 CSS: rollup-plugin-lit-css vs unsafeCSS #2222

nemethmik Oct 4, 2021

Replies: 0 comments

nemethmik
Oct 4, 2021