0

我一直在将一个网站从 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 的正确方法或我应该使用的替代方法？

4

1 回答 1

0

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

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

没有正确的方法。有方法，也有成本： -> 如果您导入缩小文件，您将导入几乎所有内容，并且没有渲染根，它应该传播到组件。

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

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

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

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

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

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

于 2021-11-22T17:23:33.217 回答