如何以编程方式模仿在chrome样式面板中禁用背景颜色？

Question

如以下系列的屏幕打印所示，每当我在 Chrome开发者工具中点击所选的背景色时，我的原子编辑器中都会获得所需的效果（我正在玩主题，通过点击此关闭我可以覆盖另一个主题的缓冲区）。这一切都很好，花花公子，但我需要一种方法来从Javascript中以编程方式执行此操作。我不熟悉css和样式，我想弄清楚等效的Javascript / HTML DOM语法。

在：

点击后（注意_background-color的直线）：

这个问题可以分为两部分：

A）如何使用XPath访问此 background-color 元素？到目前为止，我已经尝试过：

>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）我可以解决它后如何禁用它？我是否将背景颜色设置为＆＃39;透明＆＃39;？我会以某种方式删除节点吗？等

你会认为这很容易，但如果你不能正常使用这些东西，那就太难了。暗影之根是另一个潜在困难的外卡。

希望屏幕上有足够的信息来回答这个问题，但如果您需要更多信息，请告诉我。

Answer 1

以下是我必须采取的措施来解决问题。

<强>概述
基本上，我要求的是一种禁用 css规则的方法。基本上，根据this link和this link，您似乎无法执行此操作。您只能覆盖样式属性。这可能是@Justinas在他的回复中得到的结果（我无法测试他的解决方案，因为原子编辑器浏览器环境是一个自定义的，锁定的浏览器环境，没有jQuery或允许你定义你自己的样式表。）

由于Chrome 以某种方式能够做到这一点，这表明Chrome开发者工具并不总是使用DOM / HTML API来操纵DOM。它必须使用某种extra-api方法来禁用css merge 中的规则，例如以某种方式切换主存（？）。我的整个假设是Chrome本身在任何地方使用官方DOM API，因此如果它可以做到，那么我也应如此。在所有情况下似乎都不是这样。

<强>背景
我有一个带有background-color的父元素，并且附加到此元素的是shadow dom。在阴影DOM中我 覆盖了父background-color，但是，我不知道这是否是影子DOM的事情，看来父母＆＃39; s background-color优先于孩子background-color。这与＆＃34;最后定义的胜利＆＃34;的正常CSS行为相反。我实际上想要禁用父母样式元素，以便孩子接管。

<强>解决方案
由于无法禁用css元素，所以我不得不用火来对抗，并使用子元素的background-color将一个样式元素添加到父元素：

#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

<强>结论
对我来说，三大要点是：

A）您无法以编程方式禁用样式元素。你只能覆盖它们 B） Chrome开发者工具并不总是使用标准DOM API，因此请不要认为如果Chrome可以执行此操作，您可以。
C）如果您使用影子DOM，CSS继承可能不是您所期望的。

我并不是说这些必然是真实的陈述，只是因为我在这方面的知识有限，这对我来说是显而易见的。

Answer 2

A：尝试var el = $('atom-pane.pane.active atom-text-editor').eq(1).find('> atom-styles')

之类的内容

B ：尝试将背景颜色设置为inherit

el.addClass('my-class');

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