webc/host-hidden

Why

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.

Fix

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.

Examples

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

Sources

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

Read it in the terminal

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