title: Communcation between Web Components
body: <p>I am building a project with web components and vanilla javascript.</p>
  <p>I have a component/module called <code>meal.module</code> - It is the parent component of the components <code>meal-list</code> and <code>meal-search</code>.</p>
  <ul>
  <li>meal-list displays multiple meals from an api.</li>
  <li>meal-search contains an input field and seachterm as attribute.</li>
  </ul>
  <p><strong>meal.module.js</strong></p>
  <pre><code>export default class MealModule extends HTMLElement {
  
      connectedCallback() {
          this.innerHTML = '&lt;mp-meal-search searchterm=&quot;&quot;&gt;&lt;/mp-meal-search&gt; ' +
              '&lt;mp-meal-list&gt;&lt;/mp-meal-list&gt; ' +                
      }
  }
  
  if (!customElements.get('mp-meal-module')) {
      customElements.define('mp-meal-module', EssenModule);
  }
  </code></pre>
  <p><strong>meal-list.component</strong></p>
  <pre><code>export default class MealListComponent extends HTMLElement {
  
     connectedCallback() {
         this.attachShadow({mode: 'open'});
         this.shadowRoot.innerHTML = Template.render();
         // Renders the meals from api into the template 
         this.getMeals();
     }
  
     (....) more code
  }
  
  if (!customElements.get('mp-meal-list')) {
      customElements.define('mp-meal-list', MealListComponent);
  }
  </code></pre>
  <p><strong>meal-search.component</strong></p>
  <pre><code>export default class MealSearchComponent extends HTMLElement {
  
      static get observedAttributes() {
          return ['searchterm'];
      }
  
      attributeChangedCallback(name, oldVal, newVal) {
          if (name === 'searchterm') {
              this.doSearch();
          }
      }
  
      set searchTerm(val) {
          this.setAttribute('searchterm', val)
      }
  
      get searchTerm() {
          return this.getAttribute('searchterm');
      }
  
      constructor() {
          super();
          this.attachShadow({mode: 'open'});
          this.shadowRoot.innerHTML = '&lt;input type=&quot;text&quot; id=&quot;searchterm&quot; value=&quot;&quot;/&gt;'
  
          this.shadowRoot.addEventListener('change', (event) =&gt;
              this.searchTerm = event.target.value
          )
      }
  
      doSearch() {
          // send signal to MealListComponent for search
      }
  }
  
  if (!customElements.get('mp-meal-search')) {
      customElements.define('mp-meal-search', MealSearchComponent);
  }
  </code></pre>
  <p>In the seach-component the SearchTerm is configured as Attribute. Everytime the input field gets changed, the attribute also changes.</p>
  <p>Now I want to implement a &quot;searchMeal&quot; function, that always triggers when the attribute in MealSearchComponent changes.</p>
  <p>I already tried to import the <code>MealSearchComponent</code> into the  MealListComponent. But it does seem to break the rule of components, not having any dependencies.</p>