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

Question

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

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

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

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

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

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

Answer 1

/deep/ 可以删除
::shadow可以换成>

还不知道其他人

Answer 2

问题有点老，但以防你自己还没弄明白。

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

: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>) 伪 class 匹配宿主元素，如果它或其任何祖先匹配 <selector>。例如：仅当自定义元素是具有 class .different.

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

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

要用任何简单的东西替换这个都不是一件容易的事。甚至 webcomponents polyfill 也不尝试。我想不出任何 css 实现此目标的唯一方法。

::content 以宿主元素的分布式子节点为目标，即所有 picked 使用 content [=77= 显示的元素]或。用宿主元素的 tagName 替换 ::content selectors 应该可以在这里工作。即

::content > h3 {
  color: green;
}

/*replace it with*/

x-element h3 {
  color: green;
}

请注意，我也从上面删除了子 select 或 >，因为在分发后不受支持的浏览器中，h3 将不再是 x-element 的直接后代。考虑到内容 selector 的使用方式，我建议删除子内容 selector 以及任何可用的地方。

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

How to properly translate shadow DOM CSS selectors to non-shadow-DOM selectors

webdriver

selenium-webdriver

shadow-dom

polymer