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

我想用非Shadow-DOM支持的浏览器（如Firefox，PhantomJS以及使用WebDriver的其他浏览器）测试Polymer应用程序。 Firefox和PhantomJS webdriver的命令时，我使用类似如何正确地将阴影DOM CSS选择器转换为非阴影DOM选择器

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

是否有一些规则，如何最好地翻译失败/接近这些选择时，不能应用在polyfills：

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

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

来源

2015-04-22 Günter Zöchbauer

问题是有点老了，但如果你的避风港”你还没有明白。

/深/（不推荐）：当你在你的答案的话，就删除它应该在大多数的情况下工作。
:: shadow（不建议使用）：也可以删除。如果您正在定位的节点不是主机元素的影子根目录的直接子节点，则可能无法正常工作。
：主机（）伪类被用来选择定制元素从内部阴影-DOM，在非支持的浏览器将是等于从子元素中选择父节点。由于我们don't have parent selectors在CSS中，并且您正在编写js进行转换，您可以识别主机元素的tagName并使用它代替：主机选择器。类似下面：

: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; 
 
}

：主机上下文（<selector>）伪类宿主元素相匹配，如果它或其任何祖先的匹配<selector>。例如：仅当自定义元素是.different类元素的后代时，才会将下面的规则应用于自定义元素。

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

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

这不会是很容易更换这一个任何事情简单。即使webcomponents polyfill也不会尝试它。我想不出任何CSS来实现这一点。

::内容目标分布式host元素的子节点，即，它们是拾取使用内容选择器，以显示所有元素。使用主机元素的tagName替换::内容选择器应该在这里工作。即

::content > h3 { 
 
    color: green; 
 
} 
 

 
/*replace it with*/ 
 

 
x-element h3 { 
 
    color: green; 
 
}

注意，我已删除的子选择 >也从上面，因为在非支持的浏览器分布H3后将无法X元素的直系后代了。鉴于内容选择器的使用方式，我建议在任何可用的位置移除子选择器。

来源

2015-10-25 17:27:28 Abhinav

/deep/可以只被删除
::shadow可以通过>更换

不知道其他人尚未

来源

2015-08-18 09:36:58

试图删除'/ deep /'和':: shadow'在Chrome和Firefox中都能正常工作，但Safari（我认为是IE）在我身上爆炸了。你是否能够始终如一地工作？ – Indolering

我不知道为什么这在Chrome中适合你，它只能在没有影子DOM支持的浏览器中工作。我也在IE/Edge中遇到过这个问题（没有尝试Safari）。我的解决方法是递归调用'shadowRoot.querySelectorAll（）'而不是'/ deep /'和':: shadow'。对我来说，它看起来像是因为IE（也可能是Safaru）已经启用了阴影DOM（但没有正式确认），但不支持在'querySelector'中的'/ deep /'和':: shadow'。 –

我错过了，我只是在Chrome中运行时禁用了'/ deep /'...所以该方案在Chrome和Firefox中运行。但是，此评论主题超出了SO的范围，请参阅[webdriver.io]（https://github.com/webdriverio/webdriverio/issues/194）和[selenium]（https://github.com/ SeleniumHQ/selenium/issues/1041）问题。 – Indolering

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

回答

相关问题