Closed Bug 1111735 Opened 9 years ago Closed 6 years ago

Components with 'display: block' in :host cannot be overridden without !important

Categories

(Firefox OS Graveyard :: Gaia::Components, defect)

All
Gonk (Firefox OS)
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED WONTFIX

People

(Reporter: eeejay, Unassigned)

References

Details

Attachments

(1 file)

Attached file test case
In the given test case, the style for gaia-header in the doc <head> is overridden by the :host style.

The only way I found to override it is with !important. This quickly gets useless when you want to override it again.

I am running into this in the gallery app. The gaia-header should only be shown in tablets, so the default css has display: none, and then the tablet css has display: block.
Blocks: 1068957
Apparently once we really support shadow CSS, this won't be a problem:

"One gotcha is that rules in the parent page have higher specificity than :host rules defined in the element, but lower specificity than a style attribute defined on the host element. This allows users to override your styling from the outside. :host also only works in the context of a ShadowRoot so you can't use it outside of Shadow DOM."

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
Depends on: 1113392
No longer blocks: 1068957
Firefox OS is not being worked on
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: