1964412 - hidden attribute doesn't work as expected for reusable components with a display property set

Status: RESOLVED DUPLICATE of bug 2051196

(Toolkit :: UI Widgets, defect, P2)

Description

[Mark Kennedy [:mark]]

Currently if hidden attribute is applied to a reusable component that already has display property set (which is almost all of them), the component will not be visually hidden.

Steps to reproduce

1. Add a hidden attribute to a reusable component (e.g. <moz-button label="Button" hidden></moz-button>)

Expected Behavior
The component is no longer visible, per hidden attribute spec.

Actual Behavior
The component is still visible.

Comment 1

[Mark Kennedy [:mark]]

After discussion, we've decided to add the following CSS at a global level to ensure hidden works as expected.

[hidden] {
  display: none !important;
}

The solution is a universal one and also recommended.

Comment 2

[Mark Kennedy [:mark]]

It was noted in the discussion that a part of this work should include checking everywhere and verifying that the solution won't break any previous behavior: e.g. finebar.css

Comment 5

[Hanna Jones [:hjones]]

This has been fixed by the work in Bug 2051196