LitElement 是 Web Components 标准库中的一部分，它可以帮助我们更轻松地创建自定义元素。自定义元素是最基本的 Web Components 之一，它可以让我们将 UI 组件打包成一个可以被多个页面使用的可重复使用的组件。
在本文中，我会详细介绍如何使用 LitElement 创建可复用的 Custom Elements 组件，并提供示例代码和实际应用案例。
开始
首先，我们需要创建一个新的 LitElement 元素。可以使用 lit-element 的 customElement() 方法创建一个自定义元素。
-- -------------------- ---- -------
------ - ----------- ---- - ---- --------------
----- --------------- ------- ---------- -
------ --- ------------ -
------ -
-------- - ----- ------ --
--
-
------------- -
--------
------------ - ------ --------
-
-------- -
------ -----------------------------
-
-
------------------------------------------ -----------------在上面的示例代码中，我们创建了一个叫做 MyCustomElement 的自定义元素，并且将其注册为 my-custom-element。
MyCustomElement 继承自 LitElement， 我们在其中定义了组件的 properties 和 constructor，以及组件的 render 方法。在 render 方法中，我们使用 LitElement 中的 html 方法创建了一个包含组件 message 属性的 <p> 元素。
现在，我们就可以在页面中使用 <my-custom-element> 元素了。
<my-custom-element></my-custom-element>
这个元素将呈现为一个包含 "Hello World!" 消息的段落。
添加属性和事件
可以通过将属性传递给自定义元素来自定义其行为。我们可以在 MyCustomElement 的 properties 对象中定义一个或多个属性，属性类型可以是多种类型包括 String、Number、Boolean、Array、Object 等。
-- -------------------- ---- -------
----- --------------- ------- ---------- -
------ --- ------------ -
------ -
-------- - ----- ------ --
------ - ----- ------ --
----------- - ----- ------- --
--
-
------------- -
--------
------------ - ------ --------
---------- - --
--------------- - ------
-
-------- -
------ -----
----------------------
------- --------------------------- -------------------------------
------- ------------- -----
---------
--
-
------------ -
-------------
-
-在上面的示例代码中，我们在 MyCustomElement 的 properties 中定义了 message、count 和 isDisabled 三个属性， 类型分别是 String、Number 和 Boolean。 我们在 constructor 中为这些属性设置默认值。
接下来，我们更新了 render 方法，它现在返回一个包含 <p> 和 <button> 元素的模板字符串。在模板字符串中，我们使用了属性插值来显示 message 属性的值，并在按钮上绑定了一个点击事件。
我们还定义了一个名为 _increment() 的私有方法，用于在按钮单击时更新 count 属性的值。
实例化 Custom Elements
现在，我们可以在 HTML 中实例化 MyCustomElement 自定义元素了。
<my-custom-element message="Hello Web Components"></my-custom-element>
在上面的示例代码中，我们为 message 属性传递了一个不同于默认值的值，元素将呈现为一个包含 "Hello Web Components" 消息和一个按钮的段落。
我们还可以通过 JavaScript 实例化元素。
const myCustomElement = document.createElement('my-custom-element');
myCustomElement.message = 'Hello Web Components';
document.body.appendChild(myCustomElement);这将创建一个 my-custom-element 自定义元素的实例，并将其添加到页面的 body 元素中。
结论
使用 LitElement 创建可复用的 Custom Elements 组件是一种方便、灵活且可扩展的方法。我们可以在一个项目中创建多个自定义元素，并使用它们来创建复杂的 UI 组件。希望这篇文章能够帮助你开始使用 LitElement 创建自定义元素。
完整的示例代码可以在 https://github.com/Polymer/lit-element 示例中找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671c88f19babaf620fb13515