---
title: "ZingGrid Web Component: `<zg-focus>` | Docs"
description: "View our in depth tutorial covering the web component `<zg-focus>` tag and the associated features for the JavaScript grid."
url: https://www.zinggrid.com/docs/v1/api/tags/zg-focus
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/v1/api/tags/zg-focus.md
mode: provenance
representation: markdown
origin_response_id: 1364041c16a01ebbf64bc1d151e2c8ce
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.762Z
version_nonce: 6c5a38083bf8fc50030fbd2b221cb32d
generated_at_utc: 2026-10-24T01:41:47.798Z
response_nonce: a9c55860d2fd1b7e0f026159047e6a59
```

# `<zg-focus>`

Version 1

[Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/zg-focus--docs)

The `<zg-focus>` tag is a web component that is used as a container for the focus of cell(s) and used as a
CSS target for styling by the developer. **The `<zg-focus>` web component should not be accessed specifically beyond styling.**

![Image of the DOM relationship for the zg-focus web component tag](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/zg-focus-web-component-dom.png "Image of the DOM relationship for the zg-focus web component tag")

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZingGrid](https://www.zinggrid.com/docs/api/tags/zing-grid) | Parent | Generated | n/a |

#### Related Web Components

- [`<zing-grid>`](https://www.zinggrid.com/docs/api/tags/zing-grid)

## Usage

The `<zg-focus>` element is a generated element added to `<zing-grid>` when the `selector` attribute is defined.

```html
<zing-grid selector
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
</zing-grid>
```

## Attributes

There are no attributes available for the `<zg-focus>` web component.

## CSS Variables
`<zg-focus>` can be styled with CSS variables, like so:

```css
:root {
--zg-focus-border-top: 1px solid red;
}
```

Below is a list of all the associated `--zg-focus` CSS variables. Check out the [full list of CSS variables](https://www.zinggrid.com/docs/api/css-variables/reference/) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid.

| Name | Default | Description | Demo |
| --- | --- | --- | --- |
| `--zg-focus-border` | 2px solid var(--theme-color-primary) | Styles the border of cells on focus | [Example code](https://app.zingsoft.com/demos/embed/OBOGAYLI) |
| `--zg-focus-border-bottom` | var(--zg-focus-border, 2px solid var(--theme-color-primary)) | Sets the bottom border of cells on focus | [Example code](https://app.zingsoft.com/demos/embed/UKS4GLIB) |
| `--zg-focus-border-left` | var(--zg-focus-border, 2px solid var(--theme-color-primary)) | Sets the left border of cells on focus | [Example code](https://app.zingsoft.com/demos/embed/0S69YQQ1) |
| `--zg-focus-border-right` | var(--zg-focus-border, 2px solid var(--theme-color-primary)) | Sets the right border of cells on focus | [Example code](https://app.zingsoft.com/demos/embed/RCL5RW0I) |
| `--zg-focus-border-top` | var(--zg-focus-border, 2px solid var(--theme-color-primary)) | Sets the top border of cells on focus | [Example code](https://app.zingsoft.com/demos/embed/XNXNZ5X2) |
| `--zg-focus-bottom-transform` | none | Sets the transform of bottom border of cells on focus | [Example code](https://app.zingsoft.com/demos/embed/463BLSLE) |
| `--zg-focus-left-transform` | none | Sets the transform of left border of cells on focus | [Example code](https://app.zingsoft.com/demos/embed/KZ23KZP1) |
| `--zg-focus-right-transform` | none | Sets the transform of right border of cells on focus | [Example code](https://app.zingsoft.com/demos/embed/C5WLZKW8) |
| `--zg-focus-top-transform` | none | Sets the transform of top border of cells on focus | [Example code](https://app.zingsoft.com/demos/embed/FU5AB2MU) |

## CSS Selector

`<zg-focus>` can be styled by common CSS selectors, like so:

```css
zg-focus {
  border: 1px solid red;
}
```

## CSS Shadow Parts

`<zg-focus>` exposed elements within the shadow can be styled by CSS shadow parts, like so:

```css
zg-focus::part(focus) {
  background-color: red;
}
```

Below is a list of all the associated ZGFocus shadow parts. Check out the [full list of CSS shadow parts](https://www.zinggrid.com/docs/api/styling/css-shadow-parts) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid.

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

## Slots

There are no slots available for the `<zg-focus>` web component.