webc/host-hidden

Dlaczego

A custom element is display: inline by default, so components set :host { display: block }. That author rule beats the browser's own [hidden] { display: none }, so <acme-panel hidden> stays visible: menus that should be closed show, and screen reader users hear content that should be gone.

Poprawka

Next to every :host { display: … }, add :host([hidden]) { display: none; }. Keep the default display as the first rule of the component's styles so it is easy to find.

Przykłady

/* bad */
:host { display: block; }
/* good */
:host { display: block; }
:host([hidden]) { display: none; }

Źródła

• web.dev, Custom element best practices (:host display and hidden)
• MDN, :host

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain webc/host-hidden