After download Polymer Starter Kit, I included a dom-if template inside (nested) the dom-bind template in index.html to hide the entire UI when user is not authenticated. However, I can’t get dom-if elements using app.$$(‘#id’) feature.
I’m trying to access the paperDrawerPanel in the app.closeDrawer funcion (app.js)
app.closeDrawer = function () {
console.log(app.$$('#paperDrawerPanel')); //returns null
};
How can I access that element?
Edit 1
This is the html part:
...
<body unresolved>
<span id="browser-sync-binding"></span>
<template is="dom-bind" id="app">
<auth-login id="auth" user="{{user}}" is-authenticated="{{isAuthenticated}}"" location="https://i2bserver.firebaseio.com"></auth-login>
<template is="dom-if" if="{{isAuthenticated}}">
<paper-drawer-panel id="paperDrawerPanel" drawer-width="220px" responsive-width="1100px">
...
Edit 2
I guess in the moment that app.closeDrawer is called by the routing.html the dom-if elements should already be tamped.
Here is the code that call app.closeDrawer (routing.html from PSK):
function closeDrawer(ctx, next) {
app.closeDrawer();
next();
}
// Routes
page('*', scrollToTop, closeDrawer, function(ctx, next) {
next();
});
element.$$queries inside the DOM scope ofelement. In your case,appis a template whose job is to stamp DOM into the enclosing scope (body).Try
document.querySelector('#paperDrawerPanel').