polymer /deep/ selector is not working in mobile devices

问题

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!

回答1:

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.

回答2:

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.

回答3:

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]');

来源：https://stackoverflow.com/questions/24858786/polymer-deep-selector-is-not-working-in-mobile-devices

标签

javascript

html5

css-selectors

polymer

shadow-dom