如何选择 web 组件的 shadow-dom ::part() 的 :first-child答案

【问题标题】：How do I select the :first-child of a shadow-dom ::part() of a web component如何选择 web 组件的 shadow-dom ::part() 的 :first-child
【发布时间】：2021-03-17 06:13:54
【问题描述】：

我正在尝试增加 Web 组件网格元素中左侧单元格的填充。（它不是基于 HTML 表格 - 没有其他 - 行和单元格。）

这是渲染 Web 组件的部分示例：

<div class="row" part="row" first="" style="position: absolute; left: 0px; min-width: 100%;">
  <div class="cell" part="cell" halign="left" valign="top" style="min-height: 48px;">
    <label part="cell-label">empty</label>
  </div>
  <div class="cell" part="cell" halign="left" valign="top" style="min-height: 48px;">
    <label part="cell-label">label text</label>
  </div>
  <div class="cell" part="cell" halign="left" valign="top" style="min-height: 48px;">
    <span style="overflow: hidden; min-height: 32px; display: flex; align-items: flex-start;">
      5 Parts</span>
  </div>
</div>

行和单元格使用部分语法（即part="row" 和part="cell"）公开。我能够找到单元格部分并增加填充，但它适用于每个单元格：

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

当我添加 :first-child 时，不应用填充：

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

单元格的父级是一行，因此它们都暴露于全局 CSS。感觉我已经非常接近解决方案了......

【问题讨论】：

是否可以添加running Code Snippet？您发布的 sn-ps 不一致.. grid 和 ptcs-grid
对不起，我不允许发布运行示例。我删除了不一致

标签： css web-component pseudo-class

【解决方案1】：

不幸的是，规范 (https://drafts.csswg.org/css-shadow-parts-1/#part) 指出 part 不支持使用“结构伪类”，例如 :first-child：

::part() 伪元素可以在其后接受额外的伪类，例如 x-button::part(label):hover，但从不匹配结构伪类或任何其他伪类基于树信息而不是本地元素信息进行匹配。

【讨论】：