无需登录 数据私有 本地保存

CSS ::part 选择器演示 - 穿透 Shadow DOM 定制样式

Web Components 开发工具 CSS ::part Shadow DOM
14
0
0
0

CSS ::part 选择器演示

通过 ::part() 伪元素穿透 Shadow DOM 边界，安全地定制 Web Components 内部样式。

如何工作：下方组件均使用 Shadow DOM 封装，内部元素通过 part 属性暴露。右侧编辑器中编写 ::part(名称) 选择器即可从外部定制样式。试试修改颜色、边框、阴影等属性！
组件预览
悬停组件查看可定制区域
Profile Card
container avatar name title bio follow-btn message-btn
Notification
container icon message close-btn
Pricing Card
container badge header price features cta-btn
提示：点击上方 part名称 标签可快速在编辑器中插入对应的选择器模板。多个组件可同时被相同的 ::part 选择器影响（如果它们有同名part）。
CSS Editor — ::part 选择器
自动应用已开启 · 修改即时生效
常见问题与知识点
什么是 CSS ::part 选择器？
::part() 是CSS伪元素，用于从Shadow DOM外部选择并样式化组件内部标记了 part 属性的元素。它是Web Components规范的一部分，提供了一种安全、可控的方式来定制组件样式，而不会破坏封装性。例如：my-component::part(header) { color: red; } 会选择组件内部 part="header" 的元素。
::part 选择器有哪些限制？
  • 不能链式穿透：::part(outer)::part(inner) 无效，只能穿透一层Shadow DOM。
  • 不能使用伪元素：::part(btn)::before 和 ::part(btn)::after 无效。
  • 不能添加后续选择器：::part(container) span 无效，不能在选择器后追加后代选择器。
  • ✅ 支持伪类：::part(btn):hover、::part(input):focus 等伪类可以正常使用。
  • ✅ 支持属性选择器：::part(btn)[disabled] 有效。
::part 和 CSS 自定义属性（变量）有何区别？
CSS自定义属性（--my-var）可以穿透Shadow DOM边界（因为它们是继承属性），适合传递主题色、间距等全局值。而 ::part 允许直接操作组件内部元素的任意CSS属性，如边框、阴影、布局等。两者常结合使用：组件内部用 var() 引用外部变量，外部用 ::part 进行更精细的样式覆盖。
浏览器兼容性如何？
::part() 在现代浏览器中得到了广泛支持：Chrome 73+、Edge 79+、Safari 13.1+、Firefox 72+、Opera 64+。截至2025年，覆盖了绝大多数用户。对于不支持的旧浏览器，组件仍会显示其默认Shadow DOM样式，只是无法通过::part进行外部定制。
与已废弃的 /deep/ 和 >>> 选择器有何不同？
/deep/ 和 >>>（深度选择器）可以无限制穿透所有Shadow DOM层级，这破坏了组件的封装性，因此已被废弃并从浏览器中移除。::part() 是更安全的替代方案——组件作者通过 part 属性显式声明哪些元素可以被外部样式化，既保留了封装性，又提供了灵活的定制能力。
实际开发中何时使用 ::part？
当你使用第三方Web Components库（如某些UI组件库）时，组件可能提供了 part 属性供定制。常见场景包括：调整组件内部间距、修改特定区域背景色、定制按钮圆角和阴影、适配品牌主题色等。相比完全重写组件样式，::part 提供了一种渐进增强的定制方式。
::part 可以用于所有HTML元素吗？
不可以。::part() 只能用于自定义元素（Web Components），且该元素必须使用Shadow DOM并在内部标记了对应的 part 属性。普通的HTML元素（如 <div>、<span>）不支持 ::part 选择器。如果自定义元素没有使用Shadow DOM，::part 也不会生效。
如何为组件内部的part命名？有什么最佳实践？
part名称应使用语义化命名，清晰表达元素用途（如 header、close-btn、avatar）。避免过于具体的样式描述（如 blue-rounded-box），因为样式可能变化。使用连字符分隔多词（kebab-case）。同一组件内多个元素可以有相同的part名称，外部的一条 ::part() 规则会同时影响它们。
🔧 相关工具