什么是 relit？
relit 是一个轻量级、可靠和可维护的 JavaScript 库，它利用 Template Literals、Decorators 和 Web Components 等技术，让你轻松地创建快速而且高效的 Web Components。使用 relit 你可以轻松地开发出可重复使用的组件，为你的项目增强代码的可读性和可维护性。
安装
relit 可以通过 npm 安装：
$ npm install relit
开始使用
开始使用 relit 只需要引入相应的模块即可：
import { html, render } from 'lit-html';
import { useCustomElement } from 'relit';创建组件
一个简单的组件如下所示：
-- -------------------- ---- -------
----- ----------- ------- ----------------------------- -
--- ------------ -
------ ------------------------------- -- ------ -----
-
-------- -
------ -----
-----------------------------------
--
-
-
------------------------------------- -------------这段代码定义了一个名为 MyComponent 的组件，它会渲染一个按钮，并显示在页面上。在这个组件内有一个 buttonText 的 getter 方法，它负责返回按钮文本的值。如果组件的属性中没有 buttonText 的值，那么它就会显示默认的文本“Click me!”。
渲染组件
在 body 中添加以下代码：
render(html`<my-component buttonText='Press me'></my-component>`, document.body);
这段代码渲染了 MyComponent 组件，并将其添加到 body 中。在此例中，我们给组件传递了一个 buttonText 的属性值，让其显示“Press me”。
更新组件
到此为止，我们已经成功地渲染了组件，但是当我们需要更新组件时该怎么办呢？首先，我们需要获取到该组件的实例，然后再更新相应的属性值即可。要更新该组件的 buttonText 的值，我们可以使用以下代码：
const myComponent = document.querySelector('my-component');
myComponent.setAttribute('buttonText', 'Press me again');这段代码获取到了我们刚刚创建的 MyComponent 的实例，然后使用 setAttribute 方法更新了 buttonText 的值，将它的值设置为“Press me again”。
总结
到此为止，你已经学会了如何使用 relit 编写 Web Components，并将它们在页面中渲染出来。通过使用 relit，你可以更轻松地创建出可重复使用的组件，提高你的代码质量和开发效率。希望这篇文章能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d2181e8991b448dad47