You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have experimenting with unsafeCSS and Bootstrap 5 and so far I found them working brilliantly together:
//import "bootstrap/dist/css/bootstrap.min.css"importbootstrapcssfrom"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"classBootBaseextendsLitElement{staticstyles=[unsafeCSS(bootstrapcss)]}//MobiX is needed only for elements contacted to the app state store
@customElement("boot-app")classBootAppextendsMobxReactionUpdate(BootBase){staticstyles=[...BootBase.styles,css`:host{text-align: center;}`]overriderender():TemplateResult{returnhtml`<h1>Hello BootStrap in Shadow DOM!</h1><buttontype="button" class="btn btn-primary">A Bootstrap Button</button> `}//override createRenderRoot() {return this}}declare global {interfaceHTMLElementTagNameMap{"boot-app": BootApp}}
The root of my experimental web application is a custom element:
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';importstylefrom'./css-in-css.css';
@customElement('css-in-css')classCSSInCSSextendsLitElement{staticgetstyles(){return[style];//TYPESCRIPT didn't like THIS at all!}render(){returnhtml`<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.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
I have experimenting with unsafeCSS and Bootstrap 5 and so far I found them working brilliantly together:
The root of my experimental web application is a custom element:
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:
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.
Beta Was this translation helpful? Give feedback.
All reactions