This feature is experimental. Please share your experiences so we know what to keep or change.
Elements with this attribute are hidden from the page.
When Unpoly hides an element for any reason, it will set an [hidden] attribute
instead of using an inline style like display: none.
This allows users to customize the hiding implementation using CSS.
While [hidden] is a standard HTML attribute,
its default implementation is not very useful.
In particular, it cannot hide elements with any display rule.
Unpoly improves the default CSS styles of [hidden] so it can hide arbitrary elements.
Unpoly's default styles for [hidden] look like this:
[hidden][hidden] {
display: none !important;
}
You can override the CSS to hide an element in a different way, e.g. by giving it a zero height:
.my-element[hidden] {
display: block !important;
height: 0 !important;
}
Important
Any overriding selector must have a specificity of
(0, 2, 0). Also, all rules should be defined with!importantto override other styles defined on that element.