HTML中part属性与class属性的区别及part的独有功能

一、两者的核心区别 #

• 作用域与适用场景：class是全局通用属性，不管是普通DOM元素还是未使用Shadow DOM的组件，只要匹配class选择器就能被选中；part则专为Web Components（带Shadow DOM的自定义元素）设计，仅用于暴露组件内部特定元素的样式入口，外部只能通过:part()选择器访问。
• 命名冲突风险：class全局生效，不同模块或组件用同名class极易引发样式冲突；part的命名作用域绑定到具体组件，即便多个组件用同名part，通过组件名:part(xxx)的方式选择也不会互相干扰。
• 样式控制权边界：class的样式优先级完全由选择器权重决定，外部样式很容易覆盖内部样式，缺乏明确的控制权边界；part则由组件开发者主动暴露可修改的元素，外部只能修改这些暴露的部分，既保持封装性又开放可控的定制入口。

二、part属性独有的功能（class无法实现） #

• Shadow DOM下的可控样式穿透：Web Components的Shadow DOM默认样式隔离，外部class选择器无法选中内部元素。而通过part属性，组件可以精准开放内部元素的样式修改权限，外部通过:part()就能修改这些元素的样式，兼顾了组件封装性和外部定制需求——这是class做不到的，class要么放弃Shadow DOM的隔离性，要么完全禁止外部样式渗透。
• 组件样式的安全定制：组件开发者可以明确指定哪些元素允许外部修改，比如一个自定义表格组件只暴露header和cell的part，外部只能调整这两部分的样式，不会误改组件内部的结构样式（比如表格的边框间距、内部隐藏元素）。而class要么无法触及Shadow DOM内部，要么全局污染样式。
• 跨组件的统一样式复用：如果多个不同的自定义组件都暴露了同名的part（比如title），可以通过[part="title"]或者组件1:part(title), 组件2:part(title)统一设置样式，无需为每个组件编写不同的class选择器，同时不会影响页面中其他使用同名class的普通元素。

内容的提问来源于stack exchange，提问作者AxD