Question

我想使用支持非Shadow-DOM的浏览器测试Polymer应用程序，例如Firefox，PhantomJS，以及其他使用WebDriver的浏览器。当我使用

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

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

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

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

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

Answer 1

问题有点陈旧，但如果你还没有想出来的话。

/ deep / （已弃用）：正如您在答案中所述，只需删除它就可以在大多数情况下使用。
:: shadow （已弃用）：也可以删除。用＆gt;替换它如果您定位的节点不是主机元素的影子根的直接子节点，则可能无效。
：host（）伪类用于从里面 shadow-dom中选择自定义元素，在不受支持的浏览器中，它将等于从子元素中选择父元素。由于我们在css中don't have parent selectors并且您正在编写用于转换的js，因此您可以识别host元素的tagName并使用它而不是：host selector。如下所示：

: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的直接后代。鉴于内容选择器的使用方式，我建议在任何可用的地方删除子选择器。

Answer 2

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

还不了解其他人

如何正确地将shadow DOM CSS选择器转换为非shadow-DOM选择器

2 个答案: