跨框架组件库 与使用 Lit 的 Web 组件（第一部分）

跨框架组件库 与使用 Lit 的 Web 组件（第一部分）

Web Components 是一套新的技术，允许我们创建自定义元素并将其功能封装在其他代码之外，使它们在您的 Web 应用程序中具有高度的可重用性和可共享性，非常适合开发高度自定义的设计系统。

对于这个例子，我们将创建两个卡片组件，从我最喜欢的模式库之一移植， 包容性组件 道具 海顿·皮克林 为这本优秀的书。

使用点燃

使用 vanilla Javascript 创建、缩放和维护 Web 组件会很快变得混乱，因此我选择使用利用 Typescript 的 lit 来增强表现力。无论如何，最好不要忘记查看 vanilla JS 实现以了解 Web 组件实现如何在幕后工作。

您可以在此找到 lit 文档 关联 以及卡片元素的原始Html和Js代码 这里 .

所以，让我们把手弄脏

我已经开始在 关联 .随意添加您的贡献，并且总是欢迎改进。

我添加了 Typescript、Eslint、Jasmine 和 Open Web Components 库，以保持最佳代码实践并在之后测试组件：

project package.json

我的文件夹结构将是一个可以共享内容的组件文件夹。在这种情况下，我们将在两个组件之间共享一些样式。

接下来，我们开始创建一个新的类装饰器 @customElement ('卡片图像') 在 卡片.ts 从 点亮元素 它继承并封装了一些访问 Web 组件 API 的方法：

src/card.ts

在我们可以开始定义一个接口来传递组件属性之后，我已经在同一个文件中声明了它，但是如果你认为它会被重用，请随意创建一个单独的接口：

src/card.ts

是时候定义将在 render 方法中返回的配置对象和 Html 了：

src/card.ts

现在我们可以定义样式了；我们还导入了一个共享样式，即字体定义：

src/card.ts

最后，我们将设置两个事件来解决列出的冗余点击事件问题 这里 ：

src/card.ts

现在，我们应该有一个卡片组件，如下所示：

Web component card render

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/2916/39393108