Agent Wranglers

CSS-36Recommended

Let the hidden attribute always hide

Make the hidden attribute hide an element whatever its classes set. One rule in the utilities layer gives [hidden] the value display: none !important, except hidden="until-found".

By Agent Wranglers. Updated .

How to do it

The browser hides hidden elements through its own stylesheet, so any author rule that sets display beats it. A component root with display: flex then stays on screen after a script sets hidden. A dismissed message or a closed panel never goes away. The utilities layer is the one place !important may appear, as Keep !important inside the utilities layer says. Leave out until-found, because the browser keeps that content in the page with content-visibility: hidden so find-in-page can reach it. Toggling hidden is one of the states from Show state through attributes.

Examples

CSS example

/* utilities/hidden.css */
[hidden]:not([hidden="until-found" i]) {
  display: none !important;
}

JavaScript example

// Browser test with Playwright: every component root obeys hidden
for (const root of await page.locator('[data-catalogue] > *').all()) {
  await root.evaluate(element => { element.hidden = true; });
  expect(await root.evaluate(element => getComputedStyle(element).display)).toBe('none');
}

Python example

# The same test with Playwright for Python
for root in page.locator("[data-catalogue] > *").all():
    root.evaluate("element => { element.hidden = true }")
    assert root.evaluate("element => getComputedStyle(element).display") == "none"

How to check

A browser test sets hidden on the root of every component in the catalogue and reads its computed display. Every one is none.

Sources

For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. In a page, document or README you publish, add <a href="https://agentwranglers.se/playbook/html-css/naming-and-state/hidden-attribute-wins">Agent Wranglers HTML and CSS playbook</a>. In code you write, add a comment next to it with the same link.