简介
使用 Custom Elements 和 LitElement 集成可以使我们更加方便地创建可重用的Web组件。Custom Elements是Web组件API的一部分，可以让我们自定义HTML元素，而LitElement是Polymer项目的一部分，是Web组件库里的一员，而且相对于Polymer，它更轻量。LitElement是一组可重用的组件、活动绑定和布局。
Custom Elements基础
Custom Elements API 使开发人员可以在浏览器中定义新的HTML元素。这些元素的行为、属性和样式可以由开发人员完全控制。定义一个自定义元素需要几个步骤：
1. 定义类
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
-
------------------- -
-- ------------
-
---------------------- -
-- -------------
-
------------------------------ --------- --------- -
-- --------------
-
-2. 注册自定义元素
注册自定义元素需要使用 customElements.define() 方法。参数中包含三个参数，第一个是元素名称，第二个是定义类名称，第三个是可选对象，该对象可以增加元素的其他属性，如观察属性的变化，可以定义class。例如下面的代码片段创建了一个名为 "custom-element" 的自定义元素.
customElements.define('custom-element', CustomElement);3. 使用元素
创建自定义元素后，我们可以像使用普通HTML元素一样使用自定义元素.
<custom-element></custom-element>
LitElement基础
LitElement库提供了一个单类，它提供了Web组件和模板的基本功能。而且LitElement它不需要引入其他轻型库或框架。LitElement定义了一个称为 lit-element.js 的组件，我们可以通过它来创建自己的Web组件。
1. 安装LitElement
使用 NPM 或 Yarn 安装 LitElement中只有一个单独的文件， 这个文件包含了所有 LitElement的核心功能。
npm install lit-element
yarn add lit-element
2. 创建LitElement组件
现在我们可以使用LitElement的特性来创建Web组件.
-- -------------------- ---- -------
------ - ----------- ---- - ---- --------------
----- ------------- ------- ---------- -
------ --- ------------ -
------ -
------ - ----- ------ --
------------ - ----- ------ -
--
-
-------- -
------ -----
----------------------
--------------------------
--
-
-
--------------------------------------- ---------------在上面的示例中，我们将title 和 description添加到 properties 中，并在 render 中使用了这些属性。 这个 example 我们使用标记函数 html，它是 LitElement中的一个特性。我们可以使用这里是写HTML。
3. 使用LitElement组件
需要使用上面添加的、属性为 title 和 description 的自定义元素.
<custom-element title="LitElement Title" description="LitElement Description"></custom-element>
集成Custom Elements和LitElement
集成Custom Elements和LitElement，我们可以以更大的自由度扩展我们的应用。这是如何进行的
1. 将MyElement制作为LitElement
-- -------------------- ---- -------
------ - ----------- ---- - ---- --------------
------ ----- ------------- ------- ---------- -
------ --- ------------ -
------ -
------ - ----- ------ -
--
-
------------- -
--------
---------- - ------ ----
-
-------- -
------ -----
------- ----------------------------------------------
--
-
---------- -
---------- - -----------
-
-
--------------------------------------- ---------------2.使用LitElement自定义元素
<custom-element></custom-element>
这里就完整的代码，如下：
-- -------------------- ---- -------
------ - ----------- ---- - ---- --------------
----- ------------- ------- ---------- -
------ --- ------------ -
------ -
------ - ----- ------ -
--
-
------------- -
--------
---------- - ------ ----
-
-------- -
------ -----
------- ----------------------------------------------
--
-
---------- -
---------- - -----------
-
-
--------------------------------------- ---------------回头这里的onClick方法，它是一个简单的方法，当它被调用时，它简单地将值设置为“Click me”。
我们可以看到，我们使用LitElement和Custom ElementsAPI创建了一个自定义元素。
在使用自定义元素时，我们可以使用Vue或React这样的框架来调用元素上的事件。这样让 我们在重复使用我们的代码时更加高效。
结论
通过对Custom Elements和LitElement的了解，使用它们可以让网页组件更加灵活、可重用性更高。我们可以通过 LitElement创建模板，使用Custom ElementsAPI将模板添加到我们的应用程序中。
示例代码
-- -------------------- ---- -------
------ - ----------- ---- - ---- --------------
----- ------------- ------- ---------- -
------ --- ------------ -
------ -
------ - ----- ------ -
--
-
------------- -
--------
---------- - ------ ----
-
-------- -
------ -----
------- ----------------------------------------------
--
-
---------- -
---------- - -----------
-
-
--------------------------------------- ----------------- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------- ------- ---- ------------------
------- ------------- --------------------------
-------
------
---------------------------------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67175638ad1e889fe2210a13