polymer /deep/ selector is not working in mobile d

Question

I trying to rearrange layouts when device screen is resized, so i do this:

if(screenOrientation == SCREEN_ORIENTATION_LANDSCAPE) {
        document.querySelector("html /deep/ [landscape-horizontal]").removeAttribute('vertical');
        document.querySelector("html /deep/ [landscape-horizontal]").setAttribute('horizontal', '');
}

This is working in the desktop machine correctly, but in mobile (both android phone, tablet and iOS simulator) i got this error:

"Uncaught SyntaxError: Failed to execute 'webkitMatchesSelector' on 'Element': 'html /deep/ [landscape-horizontal]' is not a valid selector.", source: bower_components/platform/platform.js (0)

Any ideas? Thanks!

Answer 1

I solved this problem via CSS:

<style shim-shadowdom>

body[portrait] /deep/ [layout][horizontal][landscape], body[landscape] /deep/ [layout][horizontal][portrait] {
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

body[portrait] /deep/ [layout][vertical][landscape], body[landscape] /deep/ [layout][vertical][portrait] {
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

</style>

Now i change "landscape" and "portrait" attributes in body on screen size changes. This is working in all browsers.

Answer 2

With Platform version ≥0.4.0 you can now use the /deep/ combinator without fear, it's been polyfilled for non-native browsers.

document.querySelector('html /deep/ [landscape-horizontal]');

Answer 3

There's currently an open issue to support this in the Shadow DOM polyfill. It works on Chrome 35+, because that's using native shadow dom.