title: Vaadin Designer Tabs not correctly adding children "tab" to tabs object
body: <p>I'm using Vaadin Deisgner 14.6.1 to create some super simple tabs. However, when I try to do some simple operations in the java class (eg selecting a tab), it throws an error which indicates that the &quot;Tabs&quot; object does <em>not</em> have the proper children &quot;tab&quot; components. Here's a simple test case below. (I discovered the issue when I was trying to add a <code>addSelectedChangeListener()</code> to the tabs class and discovered that it would never fire, presumably since the &quot;tabs&quot; class never properly had any children.) I tried a bunch of hacks, but nothing worked. (I have in the past gotten tabs to work if I stuck purely to a programmatic approach, but I really really really like using Designer, since it saves me tonnes of times and keeps the code quite modular and clean....when it works....)</p>
  <pre><code>import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
  import '@vaadin/vaadin-ordered-layout/src/vaadin-vertical-layout.js';
  import '@vaadin/vaadin-tabs/src/vaadin-tabs.js';
  import '@vaadin/vaadin-tabs/src/vaadin-tab.js';
  
  class MyTabtest extends PolymerElement {
  
      static get template() {
          return html`
  &lt;style include=&quot;shared-styles&quot;&gt;
                  :host {
                      display: block;
                      height: 100%;
                  }
              &lt;/style&gt;
  &lt;vaadin-vertical-layout theme=&quot;spacing&quot; style=&quot;width: 100%; height: 100%;&quot;&gt;
   &lt;vaadin-tabs theme=&quot;equal-width-tabs&quot; id=&quot;tabs&quot; orientation=&quot;horizontal&quot; selected=&quot;0&quot;&gt;
    &lt;vaadin-tab id=&quot;tab1&quot; selected&gt;
      Tab one 
    &lt;/vaadin-tab&gt;
    &lt;vaadin-tab id=&quot;tab2&quot;&gt;
      Tab two with a longer title 
    &lt;/vaadin-tab&gt;
    &lt;vaadin-tab id=&quot;tab3&quot;&gt;
      Tab three 
    &lt;/vaadin-tab&gt;
   &lt;/vaadin-tabs&gt;
   &lt;label id=&quot;lbl1&quot;&gt;page1&lt;/label&gt;
   &lt;label id=&quot;lbl2&quot;&gt;page2&lt;/label&gt;
   &lt;label id=&quot;lbl3&quot;&gt;page3&lt;/label&gt;
  &lt;/vaadin-vertical-layout&gt;
  `;
      }
  
      static get is() {
          return 'my-tabtest';
      }
  
      static get properties() {
          return {
              // Declare your properties here.
          };
      }
  }
  
  customElements.define(MyTabtest.is, MyTabtest);
  
  </code></pre>
  <p>and</p>
  <pre><code>package com.deepsearch.fe.tab2vizdb.fpsgraphicaldetails.spectratab.hslspectrachartandalts;
  
  import com.vaadin.flow.component.html.Label;
  import com.vaadin.flow.component.polymertemplate.Id;
  import com.vaadin.flow.component.tabs.Tab;
  import com.vaadin.flow.component.tabs.Tabs;
  import com.vaadin.flow.router.Route;
  import com.vaadin.flow.templatemodel.TemplateModel;
  import com.vaadin.flow.component.Tag;
  import com.vaadin.flow.component.dependency.JsModule;
  import com.vaadin.flow.component.polymertemplate.PolymerTemplate;
  
  /**
   * A Designer generated component for the my-tabtest template.
   *
   * Designer will add and remove fields with @Id mappings but
   * does not overwrite or otherwise change this file.
   */
  @Route(&quot;tabtest&quot;)
  @Tag(&quot;my-tabtest&quot;)
  @JsModule(&quot;./src/my-tabtest.js&quot;)
  public class MyTabtest extends PolymerTemplate&lt;MyTabtest.MyTabtestModel&gt; {
  
      @Id(&quot;tabs&quot;)
      private Tabs tabs;
      @Id(&quot;tab1&quot;)
      private Tab tab1;
      @Id(&quot;tab2&quot;)
      private Tab tab2;
      @Id(&quot;tab3&quot;)
      private Tab tab3;
      @Id(&quot;lbl1&quot;)
      private Label lbl1;
      @Id(&quot;lbl2&quot;)
      private Label lbl2;
      @Id(&quot;lbl3&quot;)
      private Label lbl3;
  
      /**
       * Creates a new MyTabtest.
       */
      public MyTabtest() {
        //  tabs.setSelectedTab(tab2); //throws error!
          tabs.addSelectedChangeListener(e -&gt; {
              System.out.println(&quot;A tab got selected!&quot;); //this never fires!!!!
          });
      }
  
      /**
       * This model binds properties between MyTabtest and my-tabtest
       */
      public interface MyTabtestModel extends TemplateModel {
          // Add setters and getters for template properties here.
      }
  }
  
  
  </code></pre>
  <p>Ultimately, I'm trying to capture a tab select event -- but it doens't seem to work when the tabs are created in Designer....is this true on Vaadin's side too? (ie is this reproducible?)</p>