Search code examples
cssweb-componentpseudo-class

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

I am trying to increase the padding of the Left cell within a web component grid element. (It is not based on HTML table - no etc - rows and cells instead.)

This is a partial example of rendered web component:

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

THe rows and cells are exposed using part syntax (ie part="row" and part="cell"). I am able to locate the cell part and increase the padding, but it applies to every cell:

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

When I add :first-child no padding is applied:

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

The parent of the cell is a row, so both are exposed to global CSS. Feels like I am very close to a solution...

Solution

  • Unfortunately the spec (https://drafts.csswg.org/css-shadow-parts-1/#part) states that using 'structural pseudo-classes', such as :first-child is not supported with 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.