如何在 Lit 中正确实现 Bootstrap？

Question

我一直在将一个网站从 Polymer 重构为 Lit，我已经完成了相当多的工作，但我被样式难住了。 为了让开发变得简单，同时我专注于我一直在做的功能：

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

那么每个元素都继承这个并且可以使用：

<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>

这可以合理地让 Masonry 和 Bootstrap 正确设置页面样式并解决一些打包/宽度问题。 在我承诺解决这些问题之前，我已经注意到这似乎不是“正确的做事方式，是否有正确的方式来使用 Masonry 和 Bootstrap 或我应该使用的替代方法？

Answer 1

好的，这可能不是一个完整的答案，但总的来说这里有一些想法：

• 当我*想到 bootstrap 时，我知道有 2 个核心部分：样式和 javascript 部分。

没有正确的方法。有方法也有成本： -> 如果你导入压缩文件，你几乎导入了所有东西，并且没有渲染根，它应该向下传播到组件。

从架构的角度来看，组件（尤其是 Web 组件）的整体理念是可重用性 -> 因此样式通常封装在组件中。

如果我们要判断这方面，目前很难用 lit 组件实现 bootstrap，因为最终的“正确方法”是让每个组件都有自己封装的样式。事实上，如果我记得很清楚，react 生态系统需要一些时间来生成一个 ReactBootstrap 版本（您可以粗略地查看代码并激发自己进行移植）。

通过快速搜索，我可以看到有人尝试过：https://github.com/nik-christou/lit-element-bootstrap

查看了 Alert 组件的代码 -> 这是一个很好的实现。

最终，您还可以将您需要的部分从引导程序中分离出来，并将它们硬移植到您的项目中（也就是只导入您使用的部分）->这将是一个粗略的折衷方案。

Lit 是一个组件库。但环境也很重要。