在 Web 应用程序中，自定义元素（Custom Elements）允许开发者创建自己的标记并对其行为进行控制。而在 Web 应用程序中，CSS 样式的呈现是关键的一环。在本文中，我们将了解 Custom Elements 中的 CSS 样式，包括如何在自定义元素中设置 CSS 样式、如何使用 Shadow DOM 和 CSS 变量及其它一些技巧。
自定义元素中的 CSS 样式
自定义元素，就像常规 HTML 元素一样，可以使用常规 CSS 样式来设置其外观。但是，由于自定义元素具有自己的设计和行为，设置自定义元素样式时需要特别小心。
自定义元素的书写方式
自定义元素的书写方式与 HTML 元素的书写方式类似，只是标记名称必须包含连字符，例如 <my-element>。以下示例定义了一个自定义元素：
-- -------------------- ---- -------
--------- -------------------------
-------
----- -
-------- ------
------- --- ----- -----
-------- -----
-
--------
--------- -----------
-----------
-------------------------与常规 HTML 相似，我们需要定义一个模板元素并在模板中设置样式来定义自定义元素。在上面的示例中，:host 伪类选择器表示自定义元素本身，并且应用了一些常规样式，例如 display: block，用于强制自定义元素成为块级元素；border: 1px solid #ccc，用于设置边框；padding: 10px，用于设置内边距。此外，我们在模板中添加了一个 <h2> 元素，用于占用自定义元素的内容区域。
自定义元素的封装
自定义元素提供了一种封装其他元素的方式。使用 Shadow DOM 可以将自定义元素的内部实现逻辑完全隐藏，只暴露外部使用者可以访问的 API。对于开发者来说，这种封装性非常重要，因为它可以让他们不必担心自定义元素内部的实现细节，只需关注其公开接口。
使用 Shadow DOM 可以将自定义元素的样式和实现逻辑完全隔离。以下示例演示了如何在自定义元素内使用 Shadow DOM：
-- -------------------- ---- -------
--------- -------------------------
-------
----- -
-------- ------
------- --- ----- -----
-------- -----
-
--------
--------- -----------
-----------
--------
----- --------- ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------------------
----- ---------- - ------------------- ----- ------ ---
---------------------------------------------------------
-
-
----------------------------------- -----------
---------
-------------------------在上述示例中，我们首先创建一个 MyElement 类，其继承自 HTMLElement。在 constructor 函数中，我们获取 ID 为 my-element-template 的模板元素，并将其添加到自定义元素的 Shadow DOM 中。接着，我们调用 customElements.define 函数来定义自定义元素名称为 my-element。
使用 CSS 变量
在自定义元素中，使用 CSS 变量可大大简化 CSS 样式。在使用 CSS 变量时，可以从样式文件中转移颜色、间距和字号等值到 CSS 变量中，并将其传递给自定义元素。这使得自定义元素更加可配置，而不需要重复定义具有相同样式的多个元素。
以下示例演示了如何使用 CSS 变量设置自定义元素样式：
-- -------------------- ---- -------
--------- -------------------------
-------
----- -
-------- ------
------- ------------------------ --- ----- ------
-------- ------------------------- ------
---------- --------------------------- ------
------ ----------------------- ------
-
--------
--------- -----------
-----------
--------
----- --------- ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------------------
----- ---------- - ------------------- ----- ------ ---
---------------------------------------------------------
-
-
----------------------------------- -----------
---------
----------- ------------------------------ ----- ------------------- -------------------在上述示例中，我们定义了四个 CSS 变量：--my-element-border、--my-element-padding、--my-element-font-size 和 --my-element-color，并为它们提供默认值。我们将这些变量的值设置在 :host 伪类选择器中，以定义自定义元素的外观。在自定义元素元素的标记中，我们通过 style 属性将两个自定义变量的值传递给该元素。
强制自定义元素不可更改
虽然 CSS 变量可以帮助我们将样式属性重用，但在某些情况下，我们希望禁用自定义元素属性的写入，以确保一直使用相同的样式。在这种情况下，可以使用 :read-only 伪类选择器。
以下示例演示了如何使用 :read-only 伪类选择器：
-- -------------------- ---- -------
--------- -------------------------
-------
----- -
-------- ------
------- ------------------------ --- ----- ------
-------- ------------------------- ------
---------- --------------------------- ------
------ ----------------------- ------
-
----------------------- -
------- --------------------------------- --- ----- ------
-------- ---------------------------------- ------
---------- ------------------------------------ ------
------ -------------------------------- ------
-
--------
--------- -----------
-----------
--------
----- --------- ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------------------
----- ---------- - ------------------- ----- ------ ---
---------------------------------------------------------
-
------ --- -------------------- -
------ -------------
-
------------------------------ --------- --------- -
-- --------- --- ----- -
----------------------------- ----
- ---- -
---------------------------------
-
-
--- ---------- -
------ ----------------------------- --- -----
-
--- --------------- -
-- ------- -
----------------------------- ----
- ---- -
---------------------------------
-
-
-
----------------------------------- -----------
---------
-------------------------
----------- ----------------------在上述示例中，我们定义了四个 CSS 变量，并在 :host 伪类选择器中使用了它们。但是，为禁用自定义元素的属性写入，我们还定义了一个新的 :host(:not([readonly])) 伪类选择器，以替换默认的 :host 伪类选择器。为了能够控制 readonly 属性，我们使用了 observedAttributes 和 attributeChangedCallback 函数来监视 readonly 属性的值变化，并通过 getter 和 setter 方法暴露出该属性。最后，我们使用 <my-element readonly></my-element> 标记中的 readonly 属性强制自定义元素不可编辑。
总结
在本文中，我们了解了如何在 Custom Elements 中使用 CSS 样式，包括如何在自定义元素中设置 CSS 样式、如何使用 Shadow DOM 和 CSS 变量及其它一些技巧。了解 Custom Elements 中的 CSS 样式非常重要，因为它可以为应用程序提供一种清晰的方法来定义和重用自定义元素，这是构建大型 Web 应用程序的关键一步。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450ca5e980a9b385b9b3661