selenium webdriver - How to properly translate shadow DOM CSS selectors to non-shadow-DOM selectors -
i want test polymer applications non-shadow-dom capable browsers firefox, phantomjs, , maybe others using webdriver. webdriver commands firefox , phantomjs fail when use
driver.findelement(const by.cssselector('* /deep/ #some-div'));
are there rules how best translated/approximate these selectors when polyfills can not applied:
/deep/
::shadow
:host()
:host-context()
:content
i create function translates such selectors automatically non-shadow-dom selectors browsers don't support them before sending request , need know how translate them.
question bit old, in case haven't figured out yourselves yet.
- /deep/ (deprecated): said in answer, removing should work in of cases.
- ::shadow (deprecated): can removed. replacing > might not work if node targeting not immediate child of host element's shadow root.
- :host() pseudo classes used select custom element inside shadow-dom, in non-supported browsers equal selecting parent child element. since don't have parent selectors in css , writing js conversion, can identify tagname of host element , use instead of :host selector. below:
:host { opacity: 0.4; transition: opacity 420ms ease-in-out; } :host(:hover) { opacity: 1; } :host(:active) { position: relative; top: 3px; left: 3px; } /*convert 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>
) pseudo class matches host element if or of ancestors matches<selector>
. example: below rule apply on custom element when it's descendant of element class.different
.
:host-context(.different) { color: red; }
<body class="different"> <x-foo></x-foo> </body>
it won't easy replace 1 simple. webcomponents polyfill doesn't attempt it. can't think of css way achieve this.
- ::content targets distributed child nodes of host element, i.e. elements picked display using content selectors. replacing ::content selectors tagname of host elements should work here. i.e.
::content > h3 { color: green; } /*replace with*/ x-element h3 { color: green; }
>
above, because in non-supported browsers after distribution h3 won't direct descendant of x-element anymore. given way content selector used, i'd suggest removing child selector wherever available.
Comments
Post a Comment