title: Hyperhtml still re-renders whole dom
body: <p>This is the code that I'm wiring which returns</p>
  
  <pre><code>var list = hyperHTML.wire(doc)`
                  &lt;li class=${['chatEl', 'dropInChat', isUnsynced, docType, isChatShown, isUnread, userType].join(' ')} rel=${doc.id}&gt;
                      &lt;div class=${['chatAvatar', avatarNumCss].join(' ')} style=${avatarCss} &gt;${[multiAvatar]}&lt;/div&gt;
                      &lt;div class='chatTypeIndicator'&gt;&lt;/div&gt;
                      &lt;div class='chatListItem'&gt;
                          &lt;div class='chatLastMessage'&gt;
                              ${wire(doc)`&lt;h4&gt;&lt;span class="userName"&gt;${name}&lt;/span&gt;${handle !== '' ? wire(doc)`&lt;span class="handle"&gt;@${handle}&lt;/span&gt;` : ''}&lt;/h4&gt;`}
                              ${((hasEmojie) ? wire(doc)`&lt;div class="has-emoji"&gt;${[emojione.shortnameToImage(content)]}&lt;/div&gt;` : wire(doc)`&lt;div class="media-attached-last-msg"&gt;${[emojione.unicodeToImage(doc.type === 'txt' ? msgTODisplay : content)]}&lt;/div&gt;` )}
                          &lt;/div&gt;
                          &lt;div class=${['chat-list', 'chat-date-time'].join(' ')} data-livestamp=${posted}&gt; ${outDate} &lt;/div&gt;
                              ${wire(doc)`&lt;div class=${notifDiv}&gt;&lt;/div&gt;`}
                          &lt;div class='delBtn'&gt;
                              &lt;a class = 'blockFromChat' href="#"&gt;&lt;/a&gt;
                              &lt;a class = 'favFromChat' href="#"&gt;&lt;/a&gt;
                              &lt;a class = 'delFromChat' href="#"&gt;&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;`
  
              return list;
  </code></pre>
  
  <p>Inside variables will calculate for desired output</p>
  
  <pre><code>var now = moment();
          var posted = moment(doc.date);
          var outDate = '';
          if(now.date() === posted.date() &amp;&amp; now.month() === posted.month() &amp;&amp; now.year() === posted.year()){
              outDate = posted.format('h:mm A');
          }else if(now.date() - 7 &lt;= posted.date() &amp;&amp; now.month() === posted.month() &amp;&amp; now.year() === posted.year()){
              outDate = posted.format('ddd');
          }else{
              outDate = posted.format('MM/DD/YYYY');
          }
  </code></pre>
  
  <p>The above is where the timestamp <strong>outDate</strong> is calculated and below is the <strong>multiavatar</strong> variable which is used in the wire()</p>
  
  <p>multiAvatar.push(wire()<code>&lt;div class=${['groupAvatar', 'g_'+ avatarNum].join(' ')} style=${{backgroundImage: 'url(' + miniAvatarUrl  + ')', backgroundSize: 'cover'}}&gt;&lt;/div&gt;</code>)</p>
  
  <p>and the below code is the where I'm binding the dom.</p>
  
  <pre><code>bind(document.querySelector('#chatListDisplay'))`
                  ${lastMessageList.map(function(doc){
                      return hyperRenderChatList(doc);
                  })}`
  </code></pre>
  
  <p>Here is the output of DOM:</p>
  
  <pre><code>&lt;li class="chatEl dropInChat  private isShown   " rel="57abce9a0b4a520100a3e591" style="display: block;" __plugindomid="pgm272917962927"&gt;
  &lt;div class="chatAvatar undefined" style="background-image: url(img/ProfileIcon.svg); background-size: cover;" __plugindomid="pgm1289375326530"&gt;&lt;/div&gt;
  &lt;div class="chatTypeIndicator"&gt;&lt;/div&gt;
  &lt;div class="chatListItem" __plugindomid="pgm655347260182"&gt;
      &lt;div class="chatLastMessage" __plugindomid="pgm550534885881"&gt;
          &lt;h4 __plugindomid="pgm1452658781039"&gt;&lt;span class="userName" __plugindomid="pgm188048463623"&gt;Displace Hashery &lt;/span&gt;&lt;span class="handle" __plugindomid="pgm1268924787529"&gt;@Displace&lt;/span&gt;&lt;/h4&gt;F
      &lt;/div&gt;
      &lt;div class="chat-list chat-date-time needs_to_be_rendered" datetime="2018-03-01T04:39:28.424Z" __plugindomid="pgm41746152612"&gt;7 minutes ago&lt;/div&gt;
      &lt;div class="chat-message-status delivered" __plugindomid="pgm1045616861867"&gt;&lt;/div&gt;
      &lt;div class="delBtn" __plugindomid="pgm1469370042923"&gt;
          &lt;a class="blockFromChat" href="#" __plugindomid="pgm1287760548168"&gt;&lt;/a&gt;
          &lt;a class="favFromChat" href="#" __plugindomid="pgm648316158041"&gt;&lt;/a&gt;
          &lt;a class="delFromChat" href="#" __plugindomid="pgm775096736090"&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></li></p>
  
  <p>The <strong>__plugindomid</strong> attribute is set by google-maps.</p>