如何正确地将阴影 DOM CSS 选择器转换为非阴影 DOM 选择器答案

【问题标题】：How to properly translate shadow DOM CSS selectors to non-shadow-DOM selectors如何正确地将阴影 DOM CSS 选择器转换为非阴影 DOM 选择器
【发布时间】：2015-06-30 15:19:48
【问题描述】：

我想使用不支持 Shadow-DOM 的浏览器（例如 Firefox、PhantomJS 以及可能使用 WebDriver 的其他浏览器）来测试 Polymer 应用程序。当我使用类似

的东西时，Firefox 和 PhantomJS 的 WebDriver 命令失败

driver.findElement(const By.cssSelector('* /deep/ #some-div'));

当无法应用 polyfill 时，是否有一些规则如何最好地翻译/近似这些选择器：

/deep/
::shadow
:host()
:host-context()
:content

我想创建一个函数，在发送请求之前将此类选择器自动转换为非 shadow-DOM 选择器，以供不支持它们的浏览器使用，为此我需要知道如何翻译它们。

【问题讨论】：

标签： selenium-webdriver webdriver polymer shadow-dom

【解决方案1】：

问题有点老了，但如果你自己还没有弄清楚。

/deep/（已弃用）：正如您在回答中所说，在大多数情况下，只需将其删除即可。
::shadow（已弃用）：也可以直接删除。如果您的目标节点不是宿主元素的影子根的直接子节点，则将其替换为 > 可能不起作用。
:host() 伪类用于从 inside shadow-dom 中选择自定义元素，在不支持的浏览器中相当于从子元素中选择父元素。由于我们在 css 中 don't have parent selectors 并且您正在编写 js 进行转换，因此您可以识别主机元素的 tagName 并使用它来代替 :host 选择器。如下所示：

:host {
  opacity: 0.4;
  transition: opacity 420ms ease-in-out;
}
:host(:hover) {
  opacity: 1;
}
:host(:active) {
  position: relative;
  top: 3px;
  left: 3px;
}
/*Convert it to*/

x-element {
  opacity: 0.4;
  transition: opacity 420ms ease-in-out;
}
x-element:hover {
  opacity: 1;
}
x-element:active {
  position: relative;
  top: 3px;
  left: 3px;
}

:host-context(<selector>) 伪类匹配宿主元素，如果它或其任何祖先匹配<selector>。例如：仅当自定义元素是类为 .different 的元素的后代时，以下规则才适用于自定义元素。

:host-context(.different) {
  color: red;
}

<body class="different">
  <x-foo></x-foo>
</body>

用任何简单的东西替换这个并不是很容易。即使webcomponents polyfill 也不会尝试。我想不出任何 CSS 唯一的方法来实现这一点。

::content 以宿主元素的分布式子节点为目标，即使用内容选择器选择显示的所有元素。用宿主元素的 tagName 替换 ::content 选择器应该在这里工作。即

::content > h3 {
  color: green;
}

/*replace it with*/

x-element h3 {
  color: green;
}

请注意，我也从上面删除了子选择器>，因为在分发后不受支持的浏览器中，h3 将不再是 x-element 的直接后代。鉴于内容选择器的使用方式，我建议在可用的情况下也删除子选择器。

【讨论】：

【解决方案2】：

/deep/ 可以直接删除
::shadow 可以替换为>

其他的还不知道

【讨论】：

试图删除 /deep/ 和 ::shadow 在 Chrome 和 Firefox 中有效，但在 Safari（我认为是 IE）中我遇到了问题。您是否能够始终如一地进行这项工作？
我想知道为什么这适用于 Chrome，它应该只适用于不支持 shadow DOM 的浏览器。我在 IE/Edge 中也遇到了这个问题（还没有尝试过 Safari）。我的解决方法是递归调用shadowRoot.querySelectorAll() 而不是/deep/ 和::shadow。在我看来，原因是 IE（可能还有 Safaru）启用了影子 DOM（但尚未正式确认），但在 querySelector 中还不支持 /deep/ 和 ::shadow。
我说错了，我只是在 Chrome 中运行时禁用了替换 /deep/ ......所以该方案适用于 Chrome 和 Firefox。但是，此评论线程超出了 SO 的范围，请参阅 webdriver.io 和 selenium 问题。