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

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/api/tags/zg-selector-mask.md
mode: provenance
representation: markdown
origin_response_id: 84f5028161b8d39579bd6595f5d5b1e2
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.650Z
version_nonce: 31f6f02ff87051c9a26049318d1ca97f
generated_at_utc: 2026-10-26T04:27:53.385Z
response_nonce: aaa81066cb517e52b32e34685c79b79b
```

# `<zg-selector-mask>`

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

The `<zg-selector-mask>` tag is a web component that is used to wrap the cells during user selection for styling purposes. **The element should not be manually inserted by the user**. The selector mask is styleable via CSS variables or the `zg-selector-mask` CSS selector.

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

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

#### Related Web Components

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

## Usage

A `<zg-selector-mask>` tag can be triggered by adding the `selector` attribute on the `<zing-grid>` tag, like so:

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

## Attributes

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

## CSS Variables

`<zg-selector-mask>` can be styled with CSS variables, like so:

```css
:root {
  --zg-selector-mask-background: red;
}
```

Below is a list of all the associated `--zg-selector-mask` 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-selector-mask-background` | var(--theme-color-secondary) | Styles the background of selector mask | [Example code](https://app.zingsoft.com/demos/embed/WNZ6POC7) |
| `--zg-selector-mask-opacity` | .1 | Sets the opacity of selector mask | [Example code](https://app.zingsoft.com/demos/embed/1UHOVY9H) |

## CSS Selector

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

```css
zg-selector-mask {
  background: red;
}
```

## CSS Shadow Parts

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

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

Below is a list of all the associated ZGSelectorMask 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 |
| --- | --- |
| `selector-mask` | The container for the selector mask |

## Slots

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