如何为Web组件Shadow DOM ::part()的首个单元格设置内边距

你之前的写法失效是::part()的语法规则导致的：

• :first-child这类结构伪类的匹配，依赖元素和它的直接父节点的兄弟关系
• 当你直接给::part(cell)附加伪类时，没有将Shadow DOM内部的父级行（row）的上下文暴露给外部选择器，浏览器无法正确识别这些cell在所属row内的位置，匹配自然失效。
• 你已经将行结构也通过part="row"暴露到全局CSS作用域，完全可以绑定行的part作为选择器上下文解决问题。

根据要选中的单元格范围，对应使用以下选择器：

全量行首单元格加内边距（每一行的最左侧单元格都加） #

grid::part(core-grid)::part(row)::part(cell):first-child {
  padding-left: 24px !important;
}

该写法会先定位所有暴露为row的行元素，再在每行的上下文里匹配第一个单元格的part，样式仅作用于每行的左侧单元格。

仅网格第一行的左侧单元格加内边距 #

结合你示例里第一行带first属性的特征，可以直接精确定位：

grid::part(core-grid)::part(row)[first]::part(cell) {
  padding-left: 24px !important;
}

如果不需要依赖first属性标记，也可以通过行的结构伪类实现：

grid::part(core-grid)::part(row):first-child::part(cell):first-child {
  padding-left: 24px !important;
}

如果目标浏览器对链式::part()的结构伪类支持异常，可以直接利用现有属性选择器缩小范围，比如如果行首单元格存在固定的属性特征（比如自定义标识），可以直接附加到::part(cell)后：

grid::part(core-grid)::part(cell)[对应属性="属性值"] {
  padding-left: 24px !important;
}

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