我如何 select 影子的 :first-child-dom ::part() 网络组件

Question

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

这是呈现的 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。感觉我非常接近解决方案...

Answer 1

不幸的是，规范 (https://drafts.csswg.org/css-shadow-parts-1/#part) 声明使用 'structural pseudo-classes'，例如 :first-child 不支持 part:

The ::part() pseudo-element can take additional pseudo-classes after it, such as x-button::part(label):hover, but never matches the structural pseudo-classes or any other pseudo-classes that match based on tree information rather than local element information.

我如何 select 影子的 :first-child-dom ::part() 网络组件

How do I select the :first-child of a shadow-dom ::part() of a web component

css

pseudo-class

web-component