聚合物/深度/选择器在移动设备中不起作用

polymer /deep/ selector is not working in mobile devices

本文关键字：不起作用 深度 选择器 聚合物 移动      更新时间：2023-09-26

当设备屏幕调整大小时，我试图重新安排布局，所以我这样做:

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

这是在台式机正常工作，但在移动(安卓手机，平板电脑和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)

任何想法?谢谢!

目前在Shadow DOM多边形中支持这一点是一个开放的问题。它适用于Chrome 35+，因为它使用本地阴影dom。

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

现在我改变"横向"answers"纵向"属性在屏幕大小的变化。

对于平台版本≥0.4.0，您现在可以毫无畏惧地使用/deep/组合子，它已为非本机浏览器填充。

document.querySelector('html /deep/ [landscape-horizontal]');
相关文章：