使用 Custom Elements 和 LitElement 集成

简介

使用 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组件.

------ - ----------- ---- - ---- --------------

----- ------------- ------- ---------- -
  ------ --- ------------ -
    ------ -
      ------ - ----- ------ --
      ------------ - ----- ------ -
    --
  -

  -------- -
    ------ -----
      ----------------------
      --------------------------
    --
  -
-
--------------------------------------- ---------------

在上面的示例中,我们将titledescription添加到 properties 中,并在 render 中使用了这些属性。 这个 example 我们使用标记函数 html,它是 LitElement中的一个特性。我们可以使用这里是写HTML。

3. 使用LitElement组件

需要使用上面添加的、属性为 titledescription 的自定义元素.

--------------- ----------------- ------ ----------------------- ------------------------------

集成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