如何用 jquery 更改聚合物元素的属性？（修复加载时的应用程序抽屉故障）

Question

我的代码中有一个应用程序抽屉：

<app-drawer-layout fullbleed force-narrow>
<app-drawer swipe-open opened="{{drawerOpened}}">
   ...
</app-drawer>

并且在网站加载 shell（应用程序工具栏、应用程序抽屉等）时，抽屉总是出现故障（打开和关闭）大约 0.2 秒。我可以在 edge 和 firefox（有时）浏览器中看到这些故障。

所以我决定通过添加 visibility:hidden:

来修复它

<app-drawer swipe-open opened="{{drawerOpened}}" style="visibility:hidden;">
   ...
</app-drawer>

并且 make 在页面 shell 加载后 2 秒内再次可见（-ish）：

  setTimeout(function(){
        $(document).ready(function() {
            $("app-drawer").css( "visibility", "visible;" );
        });
    },2000);

但是这个 jquery 代码没有让它可见。

在网上搜索时，我发现我需要使用 Polymer.dom(this.root).querySelector 而不是 $("app-drawer")，但我不知道如何在这段代码中实现它，因为我是初学者。有帮助吗？

Answer 1

取决于您定义应用程序抽屉的位置。

如果直接在你的第一层，你可以用jquery访问它（通过ID，class，标签名w/e）。

<script>
  window.addEventListener('WebComponentsReady', function(e) {
    // imports are loaded and elements have been registered
    $("app-drawer").css( "visibility", "visible;" );
  });
</script>

如果您的应用程序抽屉位于自定义元素中，则需要传递影子根（因为 jQuery 未通过选择器查看影子根）。

您可以通过影子根并使用聚合物 dom 函数到达元素。只需获取对定义应用程序抽屉的元素的引用并查看 $ 变量。

document.querySelector("#YOUR-ELE-AROUND-APP-DRAWER").$.appDrawerID.style.visibility = "visible";

https://www.polymer-project.org/1.0/docs/devguide/local-dom#node-finding

第三种解决方案是直接在定义了 app-drawer 的自定义元素中使用 jquery 并访问它。

ready: function() {
      // access a local DOM element by ID using this.$
      $("app-drawer").css( "visibility", "visible;" );
    }

https://www.polymer-project.org/1.0/docs/devguide/registering-elements#ready-method

示例 fiddle：https://jsfiddle.net/PatrickJaja/55cbdft5/

如何用 jquery 更改聚合物元素的属性？（修复加载时的应用程序抽屉故障）

How to change a property of a polymer element with jquery? (to fix app-drawer glitch on load)

javascript

jquery

web-component

polymer

polymer-elements

如何用 jquery 更改聚合物元素的 属性？ （修复加载时的应用程序抽屉故障）

How to change a property of a polymer element with jquery? (to fix app-drawer glitch on load)

javascript

jquery

web-component

polymer

polymer-elements

如何用 jquery 更改聚合物元素的属性？（修复加载时的应用程序抽屉故障）