Polymer 1.x: Imperatively accessing DOM nodes inside a dom-if template

Here is my jsBin.

I want to access by its id a DOM node inside a dom-if template. With my existing code, I expect to see true when attempting to cast these nodes to Booleans, but instead I get false (i.e., undefined).

Steps to recreate the problem:

Open this jsBin.
Understand that the HTML pane on the right is working correctly by showing Foo and Bar and not showing Baz.
Observe the console and understand the id="foo" node is accessible but the id="bar" and id="baz" elements are not. And this is my problem.

How can I access those nodes imperatively?

http://jsbin.com/kemoravote/1/edit?html,console,output

<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="iron-form/iron-form.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>
  <style></style>
  <div id="foo">Foo</div>
  <template is="dom-if" if="{{show}}">
    <div id="bar">Bar</div>
  </template>
  <template is="dom-if" if="{{!show}}">
    <div id="baz">Baz</div>
  </template>

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {
        show: {
          type: Boolean,
          value: function() {
            return true;
          }
        }
      },
      attached: function() {
        console.log('foo', !!this.$.foo);
        console.log('bar', !!this.$.bar);
        console.log('baz', !!this.$.baz);
      },
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

Solution

The $ selector won't work. You have to use $$ as follows:

console.log('baz', !!this.$$('#baz'));

Here is the jsBin.

http://jsbin.com/xogediyato/1/edit?html,console,output

<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="iron-form/iron-form.html" rel="import">
</head>
<body>

  <dom-module id="x-element">

    <template>
      <style></style>
      <div id="foo">Foo</div>
      <template is="dom-if" if="{{show}}">
        <div id="bar">Bar</div>
      </template>
      <template is="dom-if" if="{{!show}}">
        <div id="baz">Baz</div>
      </template>

    </template>

    <script>
      (function(){
        Polymer({
          is: "x-element",
          properties: {
            show: {
              type: Boolean,
              value: function() {
                return true;
              }
            }
          },
          attached: function() {
            console.log('foo', !!this.$.foo);
            console.log('bar', !!this.$.bar);
            console.log('baz', !!this.$.baz);
            console.log('bar', !!this.$$('#bar'));
            console.log('baz', !!this.$$('#baz'));
          },
        });
      })();
    </script>

  </dom-module>

  <x-element></x-element>

</body>