CODEWITHSUNDEEP
javascriptweb-componentnative-web-component
Cenasa
Cenasa

Reputation: 601

Communcation between Web Components

I am building a project with web components and vanilla javascript.

I have a component/module called meal.module - It is the parent component of the components meal-list and meal-search.

meal.module.js

export default class MealModule extends HTMLElement {

    connectedCallback() {
        this.innerHTML = '<mp-meal-search searchterm=""></mp-meal-search> ' +
            '<mp-meal-list></mp-meal-list> ' +                
    }
}

if (!customElements.get('mp-meal-module')) {
    customElements.define('mp-meal-module', EssenModule);
}

meal-list.component

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);
}

meal-search.component

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 = '<input type="text" id="searchterm" value=""/>'

        this.shadowRoot.addEventListener('change', (event) =>
            this.searchTerm = event.target.value
        )
    }

    doSearch() {
        // send signal to MealListComponent for search
    }
}

if (!customElements.get('mp-meal-search')) {
    customElements.define('mp-meal-search', MealSearchComponent);
}

In the seach-component the SearchTerm is configured as Attribute. Everytime the input field gets changed, the attribute also changes.

Now I want to implement a "searchMeal" function, that always triggers when the attribute in MealSearchComponent changes.

I already tried to import the MealSearchComponent into the MealListComponent. But it does seem to break the rule of components, not having any dependencies.

Upvotes: 0

Views: 88

Answers (1)

user12945281
user12945281

Reputation: 297

JavaScript from the outside of the shadow DOM can access the shadow DOM via the element.ShadowRoot property.

Upvotes: 1

Related Questions