Add start and end slots to <wa-badge>

[lindsaym-fa]

Closes #2072 by:

• Removing styles for slotted <wa-icon> elements in favor of start and end slots for opt-in, reliable styling.
• Adding vertical-align: middle to <wa-badge> for consistent alignment regardless of the badge's content. (The original styles attempted to accommodate this by resizing slotted icons.)

---

Why Slots?

The initial code I set out to remove was, in part, applying margin-inline-end: var(--wa-space-2xs, 0.25em) to slotted icons. This is needlessly opinionated and fragile; it assumes icons are only placed before other badge content.

Elsewhere, we do try CSS-only solutions to apply default icon spacing according to whether the icon is at the beginning or end of the supplied content. Take this example from <wa-tab>:

::slotted(wa-icon:first-child) {
  margin-inline-end: 0.5em;
}

::slotted(wa-icon:last-child) {
  margin-inline-start: 0.5em;
}

But this doesn't actually work. Because content in the default slots of components like <wa-tab> are typically plain text nodes, including <wa-icon> means that the icon matches both :first-child and :last-child. i.e., we get this:

Slots give us much more reliable control of spacing, so it felt like the best approach for <wa-badge> and seems worth considering for other components, too.

@claviska, I'm 100% open to pushback if you think this is overkill!

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
webawesome	Ready	Preview	Feb 19, 2026 11:53pm