CSS selectors with an !important property value have a higher specificity than VisBug inline styles

[dropddesigns]

I've tried changing the font colour for text inside of a component but the colour does not change (background colour changes were fine).

When inspecting in the Chrome Devtools, I noticed that the component had !important on the color property.

However, VisBug may add style="color: #ff0000;" which has a lower specificity than the CSS class selector with the !important value applied.

I've also noticed that if a component happened to have an inline style with !important, if VisBug changes that property inline as well, the !important is dropped so again, may have a lower specificity once again.

[argyleink]

yay, glad you noticed this, and I have thoughts/opinions

you nailed it, visbug uses inline styles and currently doesnt compete with !important styles. BUT, i'd like to change that, as well as work with it. the current way to get and set styles in the DOM doesn't let me (IIRC) specify !important or read it. enter CSSOM! this api for getting and setting styles on the DOM does include a way to get and set !important.

i'm waiting for better browser support, then i'll switch from computed styles to the computed style map.

that answer you question? this is one of a few places where visbug is a bit powerless at the moment.

[dropddesigns]

Thanks for the response!

[tomhodgins]

Could you try to zap the !important from the existing rule in CSSOM that applies it? https://codepen.io/tomhodgins/pen/pYRVBv

[argyleink]

i was planning on just squashing it with whatever the user picked, like this https://codepen.io/argyleink/pen/OJJjzqv