Custom Elements（自定义元素）是 Web Components 规范其中的一部分。它允许开发者创建和注册自定义的 HTML 元素，而不是只能使用内置的 HTML 元素。但是，我们发现在某些情况下，Custom Elements 在外部的 CSS 样式中会失效。本文将会解释为什么会出现这种现象，并提供解决方案。
问题的背景
通常情况下，我们可以通过以下方法来定义一个 Custom Element：
--------- -----------------------
-------
-- ---- ------ --- --- ------ ------- --
--------
---- --- --------- -- --- ------ ------- ---
-----------
--------
----- --------------- ------- ----------- -
------------- -
--------
----- -------- - ---------------------------------------------
----- ------- - -----------------
------------------- ----- ------ ----------------------------------------
-
-
------------------------------------------ -----------------
---------这段代码定义了一个名为 my-custom-element 的 Custom Element，并在它的内部添加了一些 CSS 样式和 HTML 结构。当我们在 HTML 中使用这个元素时，它会自动应用样式和结构，如下所示：
---------------------------------------
但是，当我们在外部样式表中定义样式时：
----------------- - ------ ---- -
我们会发现，在浏览器中元素不会应用 color: red 样式。
问题的原因
这是因为浏览器在加载 CSS 样式表时，会先解析 HTML 文档，然后再应用样式。换言之，当浏览器加载文档时，Custom Element 还不存在，因此浏览器无法找到匹配的元素。因此，CSS 样式表中定义的样式无法应用在 Custom Element 上。这也是为什么当我们将样式定义放在 Custom Element 的内部时，就可以正常应用样式。
解决方案
为了解决这个问题，一个常见的方法是在 Custom Element 的构造函数中动态地向文档添加样式。例如：
--------
----- --------------- ------- ----------- -
------------- -
--------
----- -------- - ---------------------------------------------
----- ------- - -----------------
----- ----- - --------------------------------
----------------- - -
----------------- -
------ ----
-
--
------------------- ----- ------ ----------------------
-----------------------------------------------------
-
-
------------------------------------------ -----------------
---------通过动态添加样式表，我们可以在 Custom Element 中设置样式。这样，我们就可以在外部 CSS 样式表中定义样式，并将其应用到自定义元素中。例如：
-------
----------------- -
------ ----
-
--------
---------------------------------------现在，它将显示为红色。
结论
Custom Elements 在外部的 CSS 样式表中失效是由于浏览器在加载 CSS 样式表时，先解析 HTML 文档，然后再应用样式。通过动态添加样式表，我们可以在 Custom Element 中设置样式，并在外部 CSS 样式表中定义样式。这为我们提供了一种解决方案，使我们可以更灵活地控制 Custom Element 的样式。
因此，在实际开发中，我们应该始终考虑 Custom Elements 是否同时在内部和外部样式表中使用，以便在必要时能够采取适当的措施。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672033de2e7021665e0122d8