getElementById in Polymer element

Question

How can I use getElementById in a Polymer custom element?

Here is my element:

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../styles/shared-styles.html">

<dom-module id="bb-calendar">

  <template>

    <style is="custom-style" include="shared-styles"></style>

    <div class="card">
            <paper-toolbar>
                <div title>Calendar</div>
            </paper-toolbar>
            <div id="hideme">
                <div>this should be hidden</div>
            </div>
    </div>

  </template>

  <script>

    Polymer({

      is: 'bb-calendar',

      ready: function() {
        document.getElementById("hideme").style.display = 'none';
      }

    });

  </script>

</dom-module>

When I run the code I get this error message: Uncaught TypeError: Cannot read property 'style' of null

Obviously I'm doing something wrong but I don't know what.

Arianism

Answer 1

I'd use

ready: function() {
  this.$.hideme.style.display = 'none';
}

of when the element is inside <template dom-if...> or <template dom-repeat...>

ready: function() {
  this.$$('#hideme').style.display = 'none';
}   

In the end, I'd use class binding and bind a class to the element and update a property to reflect that change and use CSS to set style.display

<template>
  <style>
    .hidden { display:none; }    
  </style>
   ...
  <div class$="{{hiddenClass}}">
    <div>this should be hidden</div>
  </div>

Polymer({

  is: 'bb-calendar',

  properties: {
      hiddenClass: String,
  },

  ready: function() {
    this.hiddenClass = 'hidden';
  }

});

Dante

Thanks for your help! Solved the problem with something like what you did in your last answer (non of the others worked for me). 1. fixed the " in the class name. 2. instead of properties I used 'this.hiddenClass'. Thanks again. – Arianism

Thanks for the feedback and sorry for the mistake. I use only Dart myself. – Airframe

I believe the correct syntax in the ready handler is this.$.hideme, and this.$$('#hideme'). – Dior

You are right, I missed this.. Thanks foe the hint. – Airframe

Answer 2

Your problem is actually that your element is not attached to the document DOM when the ready callback is fired. For simply showing/hiding an element you may use the hidden attribute like this: <div hidden$="{{!shouldShow}}">

Yogh