Как изменить свойство полимерного элемента с помощью jquery? (чтобы исправить глюк приложения-ящика под нагрузкой)

Question

У меня есть код приложения в моем коде:

<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 снова становится видимым через 2 секунды после загрузки оболочки страницы (-ish):

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

Но этот код jquery не делает его видимым.

При поиске в интернете я обнаружил, что мне нужно использовать Polymer.dom(this.root).querySelector Вместо того, чтобы использовать $("app-drawer"), но я понятия не имею, как реализовать это в этом коде, так как я новичок. Любая помощь?

Answer 1

Зависит от того, где определено ваше приложение-ящик.

Если он находится непосредственно на вашем первом уровне , вы можете получить к нему доступ с помощью jquery (по идентификатору, классу, тэгу 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

Третье решение может состоять в том, чтобы использовать jquery непосредственно внутри вашего пользовательского элемента, где определен app-box, и получить к нему доступ.

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/