> ## Documentation Index
> Fetch the complete documentation index at: https://discountkit.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Web Component

> Drop <dkl-discount-badge> into your theme markup and configure it with data-* attributes

A web component is the `<dkl-discount-badge>` tag written directly into your theme's Liquid.
On a **product page** it needs **zero attributes** — it paints from the page product's carrier
and renders the badge.

## Usage

On a product page, add the `<dkl-discount-badge>` web component — it renders the primary product's badge:

```html theme={null}
<dkl-discount-badge></dkl-discount-badge>
```

<Warning>
  #### Beta Limitation for Web Components: Single Product Context

  During beta of the DKL Live Components, a Web Component is only recommended for product
  pages / where the products shown on the page are static on page load.

  A Web Component paints from a server-rendered **carrier**, which the `dkl_core` embed
  pre-renders only on **product pages**, and only for that page's product. So a Web Component
  **can't render on a collection page** — no carriers are emitted there at all (each card is a
  different product) — nor for product instances loaded in **after** page load via the Section
  Rendering API / Ajax. For **product cards** and these cases, use the
  [app block](/components/discount-badge/app-block) instead, which renders inline per card
  (resolving each card's own product). See
  [App blocks vs. Web Components](/components/app-blocks-vs-web-components).
</Warning>

## Reacting to changes

`<dkl-discount-badge>` emits no events — it re-renders its own text in place on a variant
change. To run your own code when the badge updates, watch the element with a
`MutationObserver` — see [React to badge updates](#examples) in the examples below.

## Examples

For the full list of `data-*` attributes you can set, see
[Styling & Data Attributes](/components/discount-badge/styling-and-data).

```html Whichever discount saves more theme={null}
<dkl-discount-badge data-discount-type="highest"></dkl-discount-badge>
```

```html Override attributes + tokens theme={null}
<dkl-discount-badge
  data-discount-type="highest"
  data-label="[amount] off today"
  style="
    --dkl-badge-background: #111;
    --dkl-badge-color: #fff;
    --dkl-badge-radius: 999px;
    --dkl-badge-font-size: 0.85rem;
  "
></dkl-discount-badge>
```

```js React to badge updates theme={null}
// <dkl-discount-badge> emits no events — it re-renders its own text in place
// on variant change. Observe each badge to react to those updates.
// Handles any number of badges on the page.
document.querySelectorAll('dkl-discount-badge').forEach((badge) => {
  new MutationObserver(() => {
    console.log('Badge now reads:', badge.textContent.trim())
  }).observe(badge, { childList: true, characterData: true, subtree: true })
})
```

## Next steps

<CardGroup cols={2}>
  <Card title="Styling & Data Attributes" icon="palette" href="/components/discount-badge/styling-and-data">
    Every `data-*` attribute and `--dkl-badge-*` token.
  </Card>

  <Card title="App block" icon="puzzle-piece" href="/components/discount-badge/app-block">
    The no-code, theme-editor placement.
  </Card>
</CardGroup>