简介
使用 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" 的自定义元素.
--------------------------------------- ---------------
3. 使用元素
创建自定义元素后,我们可以像使用普通HTML元素一样使用自定义元素.
---------------------------------
LitElement基础
LitElement库提供了一个单类,它提供了Web组件和模板的基本功能。而且LitElement它不需要引入其他轻型库或框架。LitElement定义了一个称为 lit-element.js
的组件,我们可以通过它来创建自己的Web组件。
1. 安装LitElement
使用 NPM 或 Yarn 安装 LitElement中只有一个单独的文件, 这个文件包含了所有 LitElement的核心功能。
--- ------- -----------
---- --- -----------
2. 创建LitElement组件
现在我们可以使用LitElement的特性来创建Web组件.
------ - ----------- ---- - ---- -------------- ----- ------------- ------- ---------- - ------ --- ------------ - ------ - ------ - ----- ------ -- ------------ - ----- ------ - -- - -------- - ------ ----- ---------------------- -------------------------- -- - - --------------------------------------- ---------------
在上面的示例中,我们将title
和 description
添加到 properties 中,并在 render
中使用了这些属性。 这个 example 我们使用标记函数 html,它是 LitElement中的一个特性。我们可以使用这里是写HTML。
3. 使用LitElement组件
需要使用上面添加的、属性为 title
和 description
的自定义元素.
--------------- ----------------- ------ ----------------------- ------------------------------
集成Custom Elements和LitElement
集成Custom Elements和LitElement,我们可以以更大的自由度扩展我们的应用。这是如何进行的
1. 将MyElement制作为LitElement
------ - ----------- ---- - ---- -------------- ------ ----- ------------- ------- ---------- - ------ --- ------------ - ------ - ------ - ----- ------ - -- - ------------- - -------- ---------- - ------ ---- - -------- - ------ ----- ------- ---------------------------------------------- -- - ---------- - ---------- - ----------- - - --------------------------------------- ---------------
2.使用LitElement自定义元素
---------------------------------
这里就完整的代码,如下:
------ - ----------- ---- - ---- -------------- ----- ------------- ------- ---------- - ------ --- ------------ - ------ - ------ - ----- ------ - -- - ------------- - -------- ---------- - ------ ---- - -------- - ------ ----- ------- ---------------------------------------------- -- - ---------- - ---------- - ----------- - - --------------------------------------- ---------------
回头这里的onClick方法,它是一个简单的方法,当它被调用时,它简单地将值设置为“Click me”。
我们可以看到,我们使用LitElement和Custom ElementsAPI创建了一个自定义元素。
在使用自定义元素时,我们可以使用Vue或React这样的框架来调用元素上的事件。这样让 我们在重复使用我们的代码时更加高效。
结论
通过对Custom Elements和LitElement的了解,使用它们可以让网页组件更加灵活、可重用性更高。我们可以通过 LitElement创建模板,使用Custom ElementsAPI将模板添加到我们的应用程序中。
示例代码
------ - ----------- ---- - ---- -------------- ----- ------------- ------- ---------- - ------ --- ------------ - ------ - ------ - ----- ------ - -- - ------------- - -------- ---------- - ------ ---- - -------- - ------ ----- ------- ---------------------------------------------- -- - ---------- - ---------- - ----------- - - --------------------------------------- ---------------
--------- ----- ------ ------ ----- --------------- -- ------------- ------- ---- ------------------ ------- ------------- -------------------------- ------- ------ --------------------------------- ------- -------
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/67175638ad1e889fe2210a13