如何改变一个属性的聚合物元素与jquery?(修复加载时应用程序抽屉故障)

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

本文关键字：jquery 加载 应用程序 故障 聚合物 改变 何改变 一个 属性 元素      更新时间：2023-09-26

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

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

和抽屉总是故障(打开和关闭)大约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")，但我不知道如何在此代码中实现它，因为我是初学者。任何帮助吗?

取决于应用程序抽屉在哪里定义。

如果它直接在<，你可以使用jquery访问它(通过ID，类，标签名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方法

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

相关文章：