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

问题描述

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

这是呈现的 Web 组件的部分示例：

List

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

<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>

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

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

单元格的父级是一行，所以两者都暴露给全局 CSS。感觉我已经很接近解决方案了...

解决方法

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

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