title: How to show the multiple component in a slot using polymer or java script
body: <p>I am trying to show the component in the slot. I have around 150 components. If i use below the concept I want to write more if else condition. So, how to avoid that more if condition using slot method. I do not know how o use slot<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots" rel="nofollow noreferrer">[https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots]</a>. So, Need to use slot here or any other method is there? Please help to find the solution.</p>
  <pre><code>&lt;button click=&quot;show(&quot;mall-content&quot;)&quot;&gt;mall-content&lt;/button&gt;
  &lt;button click=&quot;show(&quot;views-area&quot;)&quot;&gt;views-area&lt;/button&gt;
  &lt;button click=&quot;show(&quot;power-area&quot;)&quot;&gt;power-area&lt;/button&gt;
  &lt;button click=&quot;show(&quot;solar-set&quot;)&quot;&gt;solar-set&lt;/button&gt;
  &lt;button click=&quot;show(&quot;bus-stand&quot;)&quot;&gt;bus-stand&lt;/button&gt;
  &lt;button click=&quot;show(&quot;bike-card&quot;)&quot;&gt;bike-card&lt;/button&gt;
  .
  .
  .
  etc....
  
  
  &lt;template is=&quot;dom-if&quot; if=&quot;[[mall-content]]&quot;id=&quot;mall-content&quot;&gt;
      &lt;mall-content&gt;&lt;/mall-content&gt;
  &lt;/template&gt;
  &lt;template is=&quot;dom-if&quot; if=&quot;[[views-area]]&quot;id=&quot;views-area&quot;&gt;
      &lt;views-area&gt;&lt;/views-area&gt;
  &lt;/template&gt;
  &lt;template is=&quot;dom-if&quot; if=&quot;[[power-area]]&quot;id=&quot;power-area&quot;&gt;
      &lt;power-area&gt;&lt;/power-area&gt;
  &lt;/template&gt;
  &lt;template is=&quot;dom-if&quot; if=&quot;[[solar-set]]&quot;id=&quot;solar-set&quot;&gt;
      &lt;solar-set&gt;&lt;/solar-set&gt;
  &lt;/template&gt;
  &lt;template is=&quot;dom-if&quot; if=&quot;[[bus-stand]]&quot;id=&quot;bus-stand&quot;&gt;
      &lt;bus-stand&gt;&lt;/bus-stand&gt;
  &lt;/template&gt;
  &lt;template is=&quot;dom-if&quot; if=&quot;[[bike-card]]&quot;id=&quot;bike-card&quot;&gt;
      &lt;bike-card&gt;&lt;/bike-card&gt;
  &lt;/template&gt;
  .
  .
  .
  .
  etc...
  </code></pre>
  <p>Javascript:</p>
  <pre><code>var mall-content = false;
  var views-area = false;
  var power-area = false;
  var solar-set = false;
  var bus-stand = false;
  var bike-card = false;
  .
  .
  .
  etc....
  
  function show(component) {
  
      if(component == 'mall-content'){
       var mall-content = true;
       var views-area = false;
       var power-area = false;
       var solar-set = false;
       var bus-stand = false;
       var bike-card = false;
       ...etc
      }
      else if(component == 'views-area'){
       var mall-content = false;
       var views-area = true;
       var power-area = false;
       var solar-set = false;
       var bus-stand = false;
       var bike-card = false;
       ...etc
      }
      else if(component == 'power-area'){
       var mall-content = false;
       var views-area = false;
       var power-area = true;
       var solar-set = false;
       var bus-stand = false;
       var bike-card = false;
       ...etc
      }
     else if(component == 'solar-set'){
       var mall-content = false;
       var views-area = false;
       var power-area = false;
       var solar-set = true;
       var bus-stand = false;
       var bike-card = false;
       ...etc
      }
     else if(component == 'bus-stand'){
       var mall-content = false;
       var views-area = false;
       var power-area = false;
       var solar-set = false;
       var bus-stand = true;
       var bike-card = false;
       ...etc
      }
    else if(component == 'bike-card'){
       var mall-content = false;
       var views-area = false;
       var power-area = false;
       var solar-set = false;
       var bus-stand = false;
       var bike-card = true;
       ...etc
      }
     .
     .
     .
     etc.....
   
   }
  </code></pre>