How to programmatically mimic disabling background color in chrome styles panel?

Question

As shown in the following series of screen prints, whenever I click off the selected background-color in Chrome Developer Tools, I get a desired effect in my atom editor (I'm playing around with themes, and by clicking this off I can overlay a buffer with another theme). This is all fine and dandy, but I need a way to do this programmatically from Javascript. I'm not very familiar with css and styling and I'm tring to figure out the equivalent Javascript/ HTML DOM syntax.

Before:

After clicking off (note the line through _background-color):

This question can be broken down into two parts:

A) How would I access this background-color element with XPath, say? So far I've tried:

>var a = $x('/html/body/atom-workspace/atom-workspace-axis/atom-workspace-axis/atom-pane-container/atom-pane-axis/atom-pane[2]/div/atom-text-editor[2]')[0].shadowRoot.firstChild.nextSibling
->undefined
>a.style.host
->undefined

B) How do I disable it once I can address it? Do I set the background-color to 'transparent'? Do I delete the node somehow? etc.

You would think this would be easy, but it's kind of hard if you don't normally work with this stuff. The Shadow Root thing is another wild card of potential difficulty.

Hopefully, there's enough info in the screen print to answer this question, but if you need more info please let me know.

Answer 1

Here is what I had to do to fix the problem.

Overview
Basically, what I was asking for was a way to disable a css rule. Basically, per this link and this link it appears you cannot do this. You can only override a style attribute. This might have been what @Justinas was getting at in his response (I wasn't able to test his solution because the atom editor browser environment is a custom, locked-down browser environment and does not have jQuery or allow you to define your own style sheets).

Since Chrome is somehow able to do it, this suggests to me that Chrome Developer Tools does not always use DOM/HTML API to manipulate the DOM. It must be using some sort of extra-api method to disable rules in the css merge e.g. zapping main memory somehow (?). My whole supposition was that Chrome itself is using offical DOM API everywhere, and thus if it could do it, then so should I. This does not appear to be the case in all circumstances.

Background
I had a parent element with a background-color and attached to this element was a shadow dom. In the shadow DOM I was overriding the parent background-color, but, and I don't know if this is a shadow DOM thing or not, it appeared that the parent's background-color was taking precedence over the child's background-color. This is the opposite of the normal CSS behavior of "the last defined wins". I was effectively wanting to disable the parents style element, so that the child's would take over.

Solution
Since there is no way to disable a css element, I had to fight fire with fire so to speak, and add a style element to the parent element with the background-color of the child element:

#4 override backgroundColor on atom-text-editor-element
 //get shadowRoot base
 var shadowRoot = $x('/html/body/atom-workspace/atom-workspace-axis/atom-workspace-axis/atom-pane-container/atom-pane-axis/atom-pane[2]/div/atom-text-editor[2]')[0].shadowRoot
 // get child color in shadow dom
 var bgColor = shadowRoot.firstChild.nextSibling.lastChild.sheet.rules[0].style.backgroundColor
 // and add it to the parent via a new style element
 var baseEl = $x('/html/body/atom-workspace/atom-workspace-axis/atom-workspace-axis/atom-pane-container/atom-pane-axis/atom-pane[2]/div/atom-text-editor[2]')[0]
 baseEl.style.backgroundColor = bgColor

Conclusion
The three big takeaways for me are:

A) You cannot programmatically disable style elements. You can only override them.
B) Chrome Developer Tools doesn't always use standard DOM API, so don't assume that if Chrome can do it, you can.
C) CSS inheritance might not be what you expect if you're using a shadow DOM.

I'm not saying these are necessarily true statements, just that's how it appears to me with my limited knowledge in this area.

Answer 2

A: Try something like var el = $('atom-pane.pane.active atom-text-editor').eq(1).find('> atom-styles')

B: Try setting background color to inherit

el.addClass('my-class');

.my-class:host {
    background-color: inherit;
}