# Web component <label-82>

> A preview and a print button from one tag: attributes, properties, events.

Source: https://82label.app/en/docs/element/

The CDN script registers `<label-82>`. It previews the first row and prints every row when its button is pressed. A good fit for server-rendered pages without a framework (PHP, JSP, ASP).

```html
<link rel="stylesheet" href="https://82label.app/cdn/v0.2.0/82label.css">
<script src="https://82label.app/cdn/v0.2.0/82label.min.js"></script>

<label-82
  template="lbl_a1b2c3d4e5"
  data='[{"name":"Wireless earbuds Pro","price":"₩39,000","sku":"EP-2026-0412"}]'
  button="Print label">
</label-82>
```

## Attributes

| Attribute | Meaning |
| --- | --- |
| `template` | A template id (`lbl_…`) or template JSON. |
| `data` | A JSON object or array; each array item prints one label. |
| `printer` | Agent printer name. |
| `mode` | `auto` (default), `agent`, `browser` |
| `start-at` | Sheets: first slot. |
| `button` | Button text (default "인쇄"). |
| `preview` | `false` hides the preview and leaves the button. |
| `frames` | `false` skips pre-printed frames (`layer: 'frame'`). |
| `base` | Server for template ids (default https://82label.app). |

## From script

```js
const el = document.querySelector('label-82');
el.template = template;        // an object as is
el.data = orders.map(toRow);   // an array
el.addEventListener('printed', (e) => console.log(e.detail)); // PrintResult
el.addEventListener('error', (e) => console.error(e.detail));
await el.print();              // print without the button
```

## Styling

`82label.css` styles the preview frame and button; change them with CSS variables. The label picture itself is paper, so it stays white.

```css
label-82 {
  --l82-accent: #d9431f;   /* button */
  --l82-accent-ink: #fff;
  --l82-bg: #fafaf9;       /* preview frame */
  --l82-border: #e4e4e0;
  --l82-radius: 8px;
  --l82-font: Pretendard, sans-serif;
}
```

Messages (waiting for permission, subscription needed …) appear below the button in `.l82-notice`. For another tag name: `Label82.defineLabelElement('shop-label')`.