Web 组件之间的通信答案

【问题标题】：Communcation between Web ComponentsWeb 组件之间的通信
【发布时间】：2020-07-19 18:14:06
【问题描述】：

我正在使用 web 组件和 vanilla javascript 构建一个项目。

我有一个名为 meal.module 的组件/模块 - 它是组件 meal-list 和 meal-search 的父组件。

meal-list 显示来自 api 的多餐。
meal-search 包含一个输入字段和 seachterm 作为属性。

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

在 seach-component 中，SearchTerm 被配置为属性。每次更改输入字段时，属性也会更改。

现在我想实现一个“searchMeal”函数，它总是在 MealSearchComponent 中的属性发生变化时触发。

我已经尝试将 MealSearchComponent 导入 MealListComponent。但它似乎打破了组件的规则，没有任何依赖。

【问题讨论】：

有多少开发人员将为此工作？
这是大学里的一个项目@Danny'365CSI'Engelman（主题：Web 组件）
单独的文件非常适合大型团队。如果只有您，将所有内容保存在一个文件中会更容易。您已经有了耦合，主文件包含所有组件的名称，因此单个组件永远不会作为单个组件分发。对于这 3 个耦合组件，可以将其视为一盒乐高积木，组件就是积木。（隔离的）组件之间的通信最好通过事件来完成：open-wc.org/faq/events.html 我认为这是您分配的主题。但是 IRL 我会在一个带有辅助函数的导入文件（闭包）中执行此操作
@Danny'365CSI'Engelman 我理解你的意思，但是子组件不仅仅是搜索和列表——还有更多像添加组件、删除组件、更新组件等 - 我认为所有这些在一个组件中会有点太多了。这是我的论文考试。但我会看看自定义事件。
然后他们希望看到关注点分离。仍然意味着如果组件非常密切相关，您可以将它们组合在一个文件中（实际上，如果我看到我的学生明智地这样做，我会给他们一个 +1）Events 是您交流所需要的。

标签： javascript web-component native-web-component

【解决方案1】：

shadow DOM 外部的 JavaScript 可以通过 element.ShadowRoot 属性访问 shadow DOM。

【讨论】：