पॉलिमर तत्व में getElementById

Question

मैं पॉलिमर कस्टम तत्व में getElementById का उपयोग कैसे कर सकता हूं?

यहाँ मेरी तत्व है:

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

जब मैं कोड मैं इस त्रुटि संदेश मिलता है चलाएँ: Uncaught TypeError: Cannot read property 'style' of null

जाहिर है मैं कुछ गलत कर रहा हूँ, लेकिन मैं क्या पता नहीं है।

Answer 1

मैं

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

जब तत्व के अंदर <template dom-if...> या <template dom-repeat...>

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

अंत में है की

का उपयोग करेंगे, मैं कक्षा बंधन का उपयोग करेंगे और तत्व और अद्यतन करने के लिए एक वर्ग के लिए बाध्य एक संपत्ति है कि बदलाव को प्रतिबिंबित और स्थापित करने के लिए सीएसएस का उपयोग करने के 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'; 
    } 

}); 

Answer 2

आपकी समस्या वास्तव में है कि अपने तत्व जब तैयार कॉलबैक निकाल दिया जाता है दस्तावेज़ डोम से जुड़ी नहीं है। किसी तत्व को दिखाने/छिपाने के लिए आप इस तरह की छिपी हुई विशेषता का उपयोग कर सकते हैं: <div hidden$="{{!shouldShow}}">