简介
Web Components 是一组用于创建可重用、可组合、封装好的定制元素的技术。其由 Custom Elements、Shadow DOM 和 HTML Templates 三个规范组成。Web Components 可以帮助我们创建自定义 HTML 元素，以便在我们的应用程序中进行复用。
然而，当我们使用 Web Components 的时候，我们会发现其中一个困扰人的问题：样式不生效。在本文中，我们将介绍如何在 Web Components 中使用 Custom Elements API 来解决这个问题。
样式不生效的原因
在使用 Web Components 的时候，有时候我们会发现样式只对 Web Components 组件内部生效，而对外界没有任何影响。这是因为当我们使用 Web Components 的时候，其内部样式和旁边的其他元素是相互独立的。所以，通过普通的 CSS 类名并不能直接影响到 Web Components 的样式。
使用 Custom Elements API
Custom Elements 是 Web Components 规范的一部分，它允许我们创建自定义元素，并在应用程序中重复使用。使用 Custom Elements API 可以更好地控制内部 Web Components 的样式，并使其对外界产生作用。
让我们来看一个示例代码，假设我们要创建一个自定义按钮组件：
-- -------------------- ---- -------
---- --------- --- ---- -- ---
--------- ------------------------
------------- -----------
-----------
---- --------- --- ---------- -- ---
--------
----- -------- ------- ----------- -
------------- -
--------
-- ---- ------ ---
----- ---------- - ------------------- ----- ------ ---
-- -- ---- --
----- -------- - ----------------------------------------------
-- -- ---- --
----- ----- - ---------------------------------
-- --------- ------ --- -
------------------------------
-
-
---------------------------------- ----------
---------通过上面的代码，我们已经成功地创建了一个名为 my-button 的 Web Components 按钮组件。但是，现在我们发现该组件的样式不是我们想要的。为了更好地控制样式，我们可以使用 Custom Elements API 中的 adoptedStyleSheets 属性。
-- -------------------- ---- -------
---- --------- --- ---- -- ---
--------- ------------------------
-------
------ -
----------------- -----
------ ------
-
--------
------------- -----------
-----------
---- --------- --- ---------- -- ---
--------
----- -------- ------- ----------- -
------------- -
--------
-- ---- ------ ---
----- ---------- - ------------------- ----- ------ ---
-- -- ---- --
----- -------- - ----------------------------------------------
-- -- ---- --
----- ----- - ---------------------------------
-- --------- ------ --- -
------------------------------
-- -- ------------------ --------- ------ --- -
----- ---------- - --- ----------------
------------------------------ - ----------------- ----- ------ ------ ----
----------------------------- - -------------
-
-
---------------------------------- ----------
---------在上面的代码中，我们添加了一个 style 标签到模板中，然后使用 adoptedStyleSheets 来添加样式列表到 shadow DOM 中。这样，我们就可以在外部样式中使用 .my-button 类名并将样式应用到我们的 Web Components 组件了。
总结
在本文中，我们探讨了如何使用 Custom Elements API 来解决 Web Components 样式不生效的问题。我们介绍了为 Web Components 添加 adoptedStyleSheets 属性，并提供了示例代码。希望这篇文章可以帮助你更好地使用 Web Components 技术，并为你的应用程序提供更好的可重用性和可组合性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c56c86d20074f47a4698e7