Custom Elements 是一种创建可重复使用的自定义 HTML 元素的方法，可以减少代码重复和提高代码的可用性。
然而，使用 JavaScript 编写的 Custom Elements 可能会导致样式丢失的问题。本文将详细介绍这个问题的原因，并提供解决方案和示例代码。
问题的原因
在使用 Custom Elements 创建元素时，浏览器会解析自定义元素的名称，并自动将它们转换为全小写字母，然后添加一个短横线(-)作为连接符。
例如，在 JavaScript 中创建一个名为 my-custom-element 的元素：
----- --------------- ------- ----------- -
------------- -
--------
-- ---------
-
-
------------------------------------------ -----------------上面的代码会创建一个自定义元素 my-custom-element。然而，当在 HTML 中使用这个元素时，需要写成 <my-custom-element></my-custom-element>。
这样编写的 HTML 元素名称是不规范的，因为 HTML 规范要求元素名称必须小写。所以，浏览器会将 my-custom-element 转换为 my-custom-element。这意味着在自定义元素中使用的样式或者其他属性会失效。
解决方案
为了避免样式丢失的问题，可以使用两个方法中的任意一个来重命名自定义元素：
- 使用小写字母和短横线(
-)组成的元素名称。 - 将元素名称放入 JavaScript 字符串中。
这样的话，HTML 元素名称不再是通过浏览器解析自定义元素名称获得的，而是通过 JavaScript 中定义的名称获得。代码如下：
----- --------------- ------- ----------- -
------------- -
--------
-- ---------
-
-
------------------------------------------ -----------------
-- -----------------
------------------------------------------ ----- ------- ----------- -
------------- -
--------
-- ---------
-
---
-- ------- ---------- ----
----- ----------- - --------------------
---------------------------------- ----- ------- ----------- -
------------- -
--------
-- ---------
-
---示例代码
下面是一个完整的示例代码，其中为自定义元素添加样式：
--------- -----
------
------
---------------------------------
--------- --------------
-------
-------------- -
----------------- -----
------ -----
-
--------
--------- ----------
-----------
--------
----- ----------- - -----------------
----- ------------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
----- -------- - ------------------------------------
----- ------- - ---------------------------------
-------------------------------------
-
-
---------------------------------- ---------------
---------
-------
-------在这个示例中，我们使用了 attachShadow 方法来创建自定义元素的 Shadow DOM，并用样式表和 HTML 内容填充了 Shadow DOM。由于将自定义元素名称放入了 JavaScript 字符串中，所以样式不会丢失。
总结
Custom Elements 可以大大提高代码的可用性，但是在使用 JavaScript 编写 Custom Elements 时，需要注意自定义元素名称与 HTML 元素名称的区别。为了避免样式丢失的问题，可以使用小写字母和短横线 (-) 连接的元素名称或者将元素名称放入 JavaScript 字符串中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64d59663b5eee0b525d52cb4