简介
Custom Elements 是 Web Components 架构的一部分，允许开发者通过 customElements.define() 方法，定义自己的 HTML 元素。这些自定义元素可以像原生 HTML 元素一样使用，实现了组件化开发的思想。
在 Custom Elements 中，我们可以通过配置元素的参数和样式，实现元素的可定制化，提高组件的复用性和可扩展性。
本文将介绍 Custom Elements 中的参数和样式配置，帮助读者更好地使用 Custom Elements。
配置元素参数
在 Custom Elements 中，元素的参数通过 constructor() 方法传入。我们可以通过一个示例来了解怎样配置元素参数。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
--------- - ------------------------- -- ---------
---------- - -------------------------- -- -------
-
------------------- -
--------------
-
-------- -
-------------- - -
---- -------
------ ---------------
------- ---------------
----------------- --------------
--------
--
-
-
----------------------------------- -----------在上面的示例中，我们定义了一个 MyElement 元素，并在 constructor() 方法中配置了 size 和 color 两个参数。在 render() 方法中使用这两个参数，渲染了一个颜色和大小可配置的元素。
在使用该元素时，可以通过 HTML 的属性方式，动态地配置元素的参数：
<my-element size="100" color="red"></my-element>
上述代码将会生成一个 100 * 100 的红色元素。
配置元素样式
除了配置元素的参数，Custom Elements 中还可以配置元素的样式。我们可以用 CSS 来为元素增加自定义样式，实现元素的视觉可定制性。为了防止样式污染，我们可以使用 Shadow DOM，将样式限制在组件内部。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
-
------------------- -
--------------
-
-------- -
------------------------- - -
-------
---------- -
-------- -----
------------ -------
---------------- -------
-
---- -
------ ------
------- ------
----------------- -----
-
--------
---- ------------------
---- ------------------
------
--
-
-
----------------------------------- -----------在上面的示例中，我们定义了一个 MyElement 元素，并使用 attachShadow() 方法创建了一个 Shadow DOM。在 render() 方法中，我们为 Shadow DOM 内部的 HTML 添加了样式。
<my-element></my-element>
上述代码将会生成一个居中显示的灰色正方形。
除了在 Shadow DOM 内部添加样式，我们还可以使用外部样式表为元素添加样式。这需要在 constructor() 方法中向元素中动态添加 <link> 标签。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
----- ---- - -------------------------------
------------------------ --------------
------------------------- ------------------
----------------------------------
-
------------------- -
--------------
-
-------- -
------------------------- - -
---- ------------------
---- ------------------
------
--
-
-
----------------------------------- -----------在上面的示例中，我们在 constructor() 方法中动态地向元素中添加了一个指向 my-element.css 的 <link> 标签。该样式表将被应用到 Shadow DOM 内部的 HTML 元素中。
总结
在 Custom Elements 中，通过配置元素的参数和样式，实现了元素的可定制化。读者可以使用上面的示例代码，自行实践，深入了解 Custom Elements 的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64642aea968c7c53b050e466