How can I change polymer element template by passing param attribute

I'm creating a slider web component from scratch to learn.

I want the button to hide when the attribute controlVisible is false and show when it's true, but my selector $('#botaoVoltar') doesn't get anything.

What am I missing?

index.html:

<body>
    <slider-js controlVisible='false' ></slider-js>
</body>

polymer.html:

<polymer-element name="slider-js">
    <template>
        <center>
            <div id="container">
                <div id="Buttons">
                    <button name="voltar" id="botaoVoltar"><<</button>
                </div>
            </div>
        </center>
    </template>
</polymer-element>

<script>
    Polymer('slider-js', {
        controlVisible: false,

        ready: function () {
            if (this.controlVisible === false) {
                $('#botaoVoltar').hide();
            } else {
                $('#botaoVoltar').show();
            }
        }
    });
</script>

The attribute is working fine. If I console.log it, I can see if it is true or false, but the template still renders with the button.

Solution

jQuery can't get at Polymer's local DOM, so you'd have to use Polymer's own DOM API. Actually, Polymer's automatic node finding provides quick access to nodes that have IDs with this.$. For instance, you could access the botaoVoltar button in your example with this.$.botaoVoltar.

It looks like you're using old Polymer (pre 1.0). You should switch to the latest version of Polymer (1.5.0). Here's your code upgraded to the newest Polymer version:

<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <span>With control-visible:</span>
  <x-slider control-visible></x-slider>

  <span>Without control-visible:</span>
  <x-slider></x-slider>

  <!-- Normally, you would define this element in its own file. -->
  <dom-module id="x-slider">
    <template>
      <div id="container">
        <div id="Buttons">
          <button id="botaoVoltar">&lt;&lt;</button>
          <button>&gt;&gt;</button>
        </div>
      </div>
    </template>

    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-slider',

          properties : {
            controlVisible: {
              type: Boolean,
              value: false
            }
          },

          ready: function() {
            this.$.botaoVoltar.hidden = !this.controlVisible;
          }
        });
      });
    </script>
  </dom-module>
</body>

^codepen