Why should you care?

MarkupVerse design system ships mv-price and mv-badge as standalone tags.

See it live — copy this example

Save as demo.html and open in your browser, or use Run Example below.

<mv-price amount="1299" currency="INR"></mv-price>
<script>
class MvPrice extends HTMLElement {
  connectedCallback() {
    const n = Number(this.getAttribute('amount'));
    this.textContent = new Intl.NumberFormat('en-IN', {
      style: 'currency', currency: this.getAttribute('currency') || 'INR'
    }).format(n);
  }
}
customElements.define('mv-price', MvPrice);
</script>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

What happened?

• Define once, use anywhere.
• Attributes drive display.
• Shadow DOM optional for style isolation.

Practice next

1. Extend HTMLElement.
2. Read attributes in connectedCallback.
3. Register with customElements.define.
4. Add currency attribute default.
5. Move styles into shadow DOM.

Remember

Hyphenated tag names. Attributes in, text out. define once globally.

MarkupVerse price tag

Shop listing uses ten times.

Outcome: INR formatting stays consistent.