How to properly implement Bootstrap in Lit?

Question

I've been refactoring a website from Polymer to Lit and I've got pretty far with it but I am stumped by the styling. To keep it simple for development whilst I focus on the functionality I have been doing this:

export class StyledElement extends LitElement {
  // This applies styles by removing the shadowroots allowing the script tags on
  // index.html to work
  createRenderRoot() {
    return this;
  }
}

Then every element inherits this and is able to use:

<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" />
...
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" crossOrigin="anonymous"></script>
<script src="/node_modules/masonry-layout/dist/masonry.pkgd.min.js" crossOrigin="anonymous"></script>

Which does a reasonable job of getting Masonry and Bootstrap to style the pages correctly with some packing/width issues. Before I commit to fixing these issues I've noted that this doesn't seem to be the 'correct way to do things, is there a correct way to use Masonry and Bootstrap or an alternative I should be using?

Answer 1

okay, this may not be a fully developed answer but overall here some thoughts:

• When I* think of bootstrap I understand there are 2 core parts: styling and javascript part.

There is no such thing as the right way. there are ways and there are costs: -> If you import the minified files you are importing pretty much everything and without render root it should propagate down to the components.

From an architectural perspective the whole idea of components ( and in particular web components ) is re-usability -> therefore styles are usually encapsulated within the component.

Ff we are to judge this aspect it is difficult to implement bootstrap with lit components at this moment because the ultimate " right way" would be so that each component has its own style encapsulated in itself. In fact if i remember well it took some time for the react ecosystem to produce a version of ReactBootstrap ( which you could roughly look into the code and inspire yourself for a porting ).

At a quick search I can see someone did an attempt: https://github.com/nik-christou/lit-element-bootstrap

having looked through the code of an Alert component -> that is a good implementation.

Ultimately you could also isolate the parts you need from bootstrap and hard-port them to your project ( aka import just the parts you use ) -> that would be a rough compromise.

Lit is a component library. But surroundings matter as well.