---
title: "API CSS Shadow Parts | Docs"
description: "Use CSS Shadow Parts to style exposed elements within the shadow tree."
url: https://www.zinggrid.com/docs/api/styling/css-shadow-parts
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/api/styling/css-shadow-parts.md
mode: provenance
representation: markdown
origin_response_id: 8c1caa6d76e35594e9158955101598da
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.606Z
version_nonce: 921e67400d827187eaa5466ce0fa406b
generated_at_utc: 2026-11-08T23:36:17.088Z
response_nonce: 673e5e6723672db5188d22ac188737ad
```

# CSS Shadow Parts

### ZGCaption

| Name | Description |
| --- | --- |
| `caption` | Caption container |
| `title` | The title container |
| `toolbar` | The toolbar container |

### ZGCheckbox

| Name | Description |
| --- | --- |
| `text` | The text container |

### ZGColumnResize

| Name | Description |
| --- | --- |
| `handle` | The resize handle container |
| `icon` | The resize icon |

### ZGControlBar

| Name | Description |
| --- | --- |
| `batch-message` | Container for the batch editing status message. |
| `card-action` | Container for the card action controls. |
| `control-bar` | Control-bar container. |
| `layout` | Container for the layout controls. |
| `row-action` | Container for the row action controls. |

### ZGDialog

| Name | Description |
| --- | --- |
| `body` | Dialog body. |
| `body-content-wrapper` | Dialog content wrapper that wraps around editor labels and inputs. |
| `body-error` | Dialog error message that appears top of dialog body. |
| `dialog` | Dialog mask or overlay. |
| `footer` | Dialog footer consisting of footer buttons (cancel and confirm). |
| `footer-cancel` | Dialog footer cancel button. |
| `footer-confirm` | Dialog footer confirm button. |
| `form` | Dialog form consisting of header, body, and footer. |
| `header` | Dialog header consisting of header label and close button. |
| `header-close` | Dialog header close button. |
| `header-label` | Dialog header label. |

### ZGEditorRow

| Name | Description |
| --- | --- |
| `editor-row` | Editor-row container. |
| `inputs` | Container for the input fields |

### ZGFilter

| Name | Description |
| --- | --- |
| `filter` | Filter container. |
| `filter-wrapper` | Wrapper for the filter field |

### ZGFilterMenu

| Name | Description |
| --- | --- |
| `body` | The body for the menu |
| `body-conditions` | The "conditions" area of the menu |
| `body-list` | The "selectbox" area of the menu |
| `case-sensitive` | The label and checkbox for "Match Case" in the menu |
| `filter-menu` | The container for the menu |
| `footer` | The header for the menu |
| `footer-apply` | The "apply" button in the menu |
| `footer-close` | The "close" button in the menu |
| `footer-reset` | The "reset" button in the menu |
| `header` | The header for the menu |
| `header-label` | The header label for the menu |

### ZGFocus

| Name | Description |
| --- | --- |
| `bottom` | The bottom edge of the focus |
| `focus` | Focus container |
| `left` | The left edge of the focus |
| `right` | The right edge of the focus |
| `top` | The top edge of the focus |

### ZGHeadCell

| Name | Description |
| --- | --- |
| `cell` | The head-cell container |
| `cell-inner` | The content container |

### ZGInput

| Name | Description |
| --- | --- |
| `input` | The input field wrapper |

### ZGMenu

| Name | Description |
| --- | --- |
| `menu` | The container for the menu |

### ZGMenuGroup

| Name | Description |
| --- | --- |
| `group` | The container for the menu group |
| `items` | The container for the menu group items |
| `label` | The container for the menu group label |

### ZGNoData

| Name | Description |
| --- | --- |
| `status` | The container for the no data status message |

### ZGOptionList

| Name | Description |
| --- | --- |
| `list` | The container for the option list |

### ZGPager

| Name | Description |
| --- | --- |
| `center` | The container for the center content of the pager |
| `left` | The container for the left content of the pager |
| `pager` | The container for the entire pager |
| `pager-inner` | The inner container for the pager |
| `right` | The container for the right content of the pager |

### ZGSearch

| Name | Description |
| --- | --- |
| `input` | The container for the search input field |
| `search` | The container for the search |

### ZGSelect

| Name | Description |
| --- | --- |
| `mask` | The container for the selection mask |
| `select` | The container for selection |
| `select` | The container for selection |
| `select-inner` | The inner container for selection |

### ZGSelectorMask

| Name | Description |
| --- | --- |
| `selector-mask` | The container for the selector mask |

### ZGSource

| Name | Description |
| --- | --- |
| `source` | The container for the source |

### ZGStatus

| Name | Description |
| --- | --- |
| `action` | The container for the status action area |
| `close` | The container for the close icon |
| `close-icon` | The close icon |
| `message` | The container for the status message |
| `status` | The container for the status |
| `text` | The status text |

### ZGTooltip

| Name | Description |
| --- | --- |
| `close` | The tooltip close icon |