docs

CSS contract table

Style the primitive root and the projected chip markup directly in your template. No ::ng-deep is needed because the chip body belongs to you.

Selector	Applied on	Purpose
`[data-slot="chips"]`	Root shell	Stable hook for root layout, spacing, and any shell treatment you want to add.
`[data-slot="chip"]`	Projected chip item	Stable hook for the pill shell when you prefer attribute selectors over explicit classes.
`[data-slot="chip-remove"]`	Projected remove control	Stable hook for remove-button layout, hover, and focus styling.
`[data-disabled]`	Root, chip, remove control	Shared disabled-state hook reflected from the primitive contracts.
`[data-focused]`	Remove control	Focus hook on the remove button so you can draw a local ring without extra scripting.

State selectors

The primitive reflects stable slots and focus hooks, so you can style the list, chip, and remove button without owning extra state.

.docs-headless-chips-styling-shell[data-slot='chips'] {
  display: block;
}

.docs-headless-chips-styling-chip[data-slot='chip'] {
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1e3a8a;
}

.docs-headless-chips-styling-chip-remove[data-slot='chip-remove'][data-focused] {
  outline: 2px solid rgba(37, 99, 235, 0.28);
  outline-offset: 2px;
}

Release owner shell

The primitive root stays quiet while your projected chip classes carry the visible presentation.

Release owner shell (Plain-CSS)

Release owners

Style the headless root directly, then own the projected pill styling in your page stylesheet.

Mina LeeSanjay PatelOmar Aziz

Selected: Mina Lee, Sanjay Patel, Omar Aziz

CSS contract table

State selectors

chips.state-selectors.css

Release owner shell

Release owner shell (Plain-CSS)

Release owner shell (Tailwind CSS)