聚合物 /deep/ 选择器在移动设备中不起作用答案

【问题标题】：polymer /deep/ selector is not working in mobile devices聚合物 /deep/ 选择器在移动设备中不起作用
【发布时间】：2014-09-11 14:03:36
【问题描述】：

我试图在调整设备屏幕大小时重新排列布局，所以我这样做：

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

这在台式机上正常工作，但在移动设备（Android 手机、平板电脑和 iOS 模拟器）中出现此错误：

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

有什么想法吗？谢谢！

【问题讨论】：

标签： javascript html css-selectors polymer shadow-dom

【解决方案1】：

使用 ≥0.4.0 的平台版本，您现在可以毫无顾忌地使用 /deep/ 组合器，它已针对非本地浏览器进行了 polyfill。

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

【讨论】：

谢谢，现在我明白了。但是有办法在不受支持的浏览器中进行深度查询吗？
更新了我的答案，现在由聚合物平台填充。

【解决方案2】：

我通过 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>

现在我在屏幕尺寸更改时更改正文中的“横向”和“纵向”属性。这适用于所有浏览器。

【讨论】：

【解决方案3】：

Shadow DOM polyfill 目前有一个open issue 来支持这一点。它适用于 Chrome 35+，因为它使用的是原生 shadow dom。

【讨论】：

谢谢，现在我明白了。但是有办法在不受支持的浏览器中进行深度查询吗？（感谢您的工作！我在 IO14 观看了您的演示文稿，这一切都很棒:)）