getElementById in Polymer 요소

Question

Polymer 사용자 정의 요소에서 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

나는 클래스 바인딩을 사용 것, 요소가 내부 <template dom-if...> 또는 결국

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

<template dom-repeat...> 때의

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

사용하고 요소 및 업데이트에 클래스를 결합하는 것 속성은 변화를 반영하고 설정하는 CSS를 사용하는 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

귀하의 문제는 준비 콜백이 발사 될 때 당신의 요소가 문서 DOM에 연결되지 않는다는 사실이다. 단순히 요소를 표시/숨기기 위해 다음과 같은 숨김 속성을 사용할 수 있습니다. <div hidden$="{{!shouldShow}}">