0Pricing
HTML Academy · 课时

用于外部样式的 part 和 exportparts

使用 part 和 exportparts 将影子 DOM 部件暴露给外部 CSS

用于外部样式的 part 和 exportparts 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

封装的权衡

影子 DOM 严格的样式封装会阻止使用者重新设置组件内部单个元素的样式。CSS 变量适用于全局属性，但例如无法为内部的“关闭”按钮设置自定义 border-radius。parts 可以解决这个问题。

part 属性

使用 part="name" 标记影子内部元素。使用者随后可以通过 ::part(name) 伪元素定位它：my-dialog::part(close-button) { color: red; }。被命名的元素会成为样式入口，而影子的其余部分仍保持封装。

// Shadow tree:
<button part="close-button">×</button>
// Page CSS:
my-dialog::part(close-button) {
  color: red;
  border-radius: 50%;
}

一个元素上的多个 parts

用空格分隔名称，可以将一个元素公开为多个 parts：part="button primary"。::part(button) 可以通用地定位它，::part(primary) 则可以将它作为主要样式元素定位。每个名称都会独立匹配。

::part 的限制

::part 只允许使用某些伪类（:hover、:focus、:disabled），不允许使用后代组合器或进一步的结构选择。::part(card) p 无效；无法通过后代选择器进入 part 内部。

exportparts 转发 parts

当一个自定义元素在自己的影子树中嵌套另一个自定义元素时，内部元素的 parts 通常不会公开给外部页面。在嵌套元素上设置 exportparts="close-button" 可以将这些 parts 向上转发给外部宿主。

// Outer shadow:
<inner-element exportparts="close-button"></inner-element>
// Page:
outer-element::part(close-button) { color: red; }

导出时重命名

exportparts="close-button: dismiss" 会将内部 part 以新名称导出到外部元素上。这样，外部组件就可以提供独立于其所组合的内部元素的整洁命名接口。

parts 与 CSS 自定义属性

自定义属性公开值（颜色、间距、字体）。parts 公开元素（完整的 CSS 表面，包括边框、变换和动画）。请使用自定义属性表示全局设计令牌，使用 parts 进行一次性的元素级定制。同一个组件可以同时使用两者。

主题设置模式

设计系统的实践方式是：为最常定制的元素（按钮、标题、指示器）公开少量 parts，同时为颜色、间距和排版提供丰富的自定义属性。使用者可以根据需要，在值级别或元素级别设置主题。

part 名称的稳定性

part 名称会成为组件公共接口的一部分——更改名称会破坏使用者的 CSS。请选择描述元素作用的名称（“close-button”、“header”、“track”），而不是描述元素位置的名称（“first-button”），这样接口在实现不断演进时仍然具有明确意义。

文档提示

请在组件的说明文档中列出所有可用的 parts（以及导出的 parts）。如果没有文档，使用者就必须检查 DOM 才能发现 parts，这会使他们依赖于实际找到的内容。请像对待框架组件的属性列表一样对待 parts 列表。

浏览器支持

::part 和 exportparts 已在所有现代浏览器中提供。现在连较旧版本的 Safari 也支持 ::part。您可以放心使用；对于非常老旧的浏览器（大多已停止维护），可以额外提供 CSS 自定义属性作为变通方案。

知识检查

exportparts 属性有什么作用？

总结

part 属性通过 ::part(name) 公开单个影子元素，以便进行外部样式设置，在不破坏封装的情况下提供完整的 CSS 能力。exportparts 会将嵌套自定义元素中的 parts 向上转发到外部宿主，并可选择重命名。请将 parts 与 CSS 自定义属性结合起来，提供完整的主题设置接口，并将 parts 列表作为组件接口的一部分记录在文档中。

常见问题解答

「用于外部样式的 part 和 exportparts」课时是免费的吗？

是的 — 「用于外部样式的 part 和 exportparts」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「用于外部样式的 part 和 exportparts」这节课中我会学到什么？

使用 part 和 exportparts 将影子 DOM 部件暴露给外部 CSS 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「用于外部样式的 part 和 exportparts」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. attachShadow 与影子根
  2. 用于内容分发的插槽元素
  3. 影子 DOM 内的作用域样式
  4. 用于外部样式的 part 和 exportparts
← 返回 HTML Academy