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.

score 13 · Accepted Answer · edited Jan 24 '17 at 12:37

13

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';
  }

});

edited Jan 24 '17 at 12:37

Ruben Ernst

335
2
10

answered Jul 25 '16 at 08:24

Günter Zöchbauer

623,577
216
2,003
1,567

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. – Zvi Karp Jul 25 '16 at 09:10
Thanks for the feedback and sorry for the mistake. I use only Dart myself. – Günter Zöchbauer Jul 25 '16 at 09:13
I believe the correct syntax in the `ready` handler is `this.$.hideme`, and `this.$$('#hideme')`. – Dan Dascalescu Sep 26 '16 at 21:42
You are right, I missed `this.`. Thanks foe the hint. – Günter Zöchbauer Sep 27 '16 at 02:55

score 0 · Answer 2 · answered Jul 26 '16 at 11:29

0

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}}">

answered Jul 26 '16 at 11:29

Kjell

832
7
11

getElementById in Polymer element

2 Answers2