host-overridable — lint rules

:host styles avoid !important so consumers can override them.

Rule id host-overridable — run only this rule with banira lint src/*.ts --rules host-overridable.

Why it matters

!important in a :host rule wins against anything a consumer writes, so they can no longer restyle your component from the outside — it breaks the platform's cascade. Prefer normal specificity and expose intentional knobs as CSS custom properties. banira flags any :host selector that uses !important.

✗ Flagged

shadow CSS — consumers cannot override these

:host {
  display: inline-flex !important;
  color: var(--fg) !important;
}

✓ Good

shadow CSS — overridable, with a custom-property hook

:host {
  display: inline-flex;
  color: var(--fg, currentColor);
}