什么是 Custom Elements？
Custom Elements 是 Web Components 规范的一部分，它允许开发者创建自定义的 HTML 元素，并在其中封装可重用的功能。通过使用 Custom Elements，我们可以将自定义的功能打包成一个独立的组件，使得组件的使用变得更加简单、灵活、可维护。
什么是 scheme 卡片？
scheme 卡片是一种常见的 UI 元素，它通常用于展示一个链接或者一个操作，用户可以通过点击卡片来访问链接或者执行操作。scheme 卡片通常包含一个标题、一张图片和一些描述信息。
使用 Custom Elements 生成 scheme 卡片非常简单，我们只需要定义一个自定义元素，然后在其中编写 HTML 和 CSS 即可。
下面是一个简单的例子：
<my-card title="Hello World" image="https://example.com/image.jpg"> <p>This is a scheme card</p> </my-card>
-- -------------------- ---- ------- ------- - -------- ------ ------ ------ ------- --- ----- ----- -------------- ---- -------- ----- ----------- - --- --- ------- -- -- ----- - ------- --- - ------ ----- ------- ----- - ------- -- - ------- -- - ------- - - ------- ---- - -- -
在上面的例子中，我们定义了一个名为 my-card 的自定义元素，并且为该元素添加了两个属性 title 和 image。在元素内部，我们编写了一个标题和一个段落的描述信息。通过 CSS，我们为元素设置了一些样式，使其看起来像一个 scheme 卡片。
下面是 my-card 自定义元素的 JavaScript 实现：
-- -------------------- ---- -------
----- ------ ------- ----------- -
------------- -
--------
-- ---- ------ ---
----- ------ - ------------------- ----- ------ ---
-- --------
----- --------- - ------------------------------
------------------------------- -------------
-- --------
----- ----- - -----------------------------
--------------------------- ---------
----------------- - ---------------------------
-- --------
----- ----- - ------------------------------
--------------------------- ---------
------------------------- ----------------------------
-- --------
----- ----------- - ----------------------------
--------------------------------- ---------------
--------------------- - ---------------
-- ---------
-----------------------------
-----------------------------
-----------------------------------
-- ------ ------ --- -
------------------------------
-- ----
----- ----- - --------------------------------
----------------- - -
---------- -
-------- ------
------ ------
------- --- ----- -----
-------------- ----
-------- -----
----------- - --- --- ------- -- -- -----
-
------ -
------ -----
------- -----
-
------ -
------- --
-
------------ -
------- ---- - --
-
--
--------------------------
-
-
-- -------
-------------------------------- --------在上面的 JavaScript 代码中，我们定义了一个名为 MyCard 的自定义元素，并且在构造函数中使用 Shadow DOM 创建了一个容器元素和一些子元素。我们还为自定义元素添加了样式。
最后，我们通过 customElements.define() 方法将 MyCard 自定义元素注册到浏览器中。
总结
使用 Custom Elements 生成 scheme 卡片是一种非常方便、灵活、可维护的方式。通过定义一个自定义元素并在其中编写 HTML 和 CSS，我们可以快速生成一个 scheme 卡片，并且可以在多个页面中重复使用。同时，通过使用 Shadow DOM，我们可以将自定义元素的样式和行为封装起来，使得自定义元素更加独立、可重用、易维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657ce1c1d2f5e1655d7adc18