0

Web コンポーネントとバニラ JavaScript を使用してプロジェクトを構築しています。

と呼ばれるコンポーネント/モジュールがありますmeal.module-これは、コンポーネントの親コンポーネントでありmeal-list、meal-search.

  • 食事リストは、API からの複数の食事を表示します。
  • 食事検索には、属性として入力フィールドと検索語が含まれています。

食事.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);
}

食事リスト.コンポーネント

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

食事検索.コンポーネント

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

検索コンポーネントでは、SearchTerm が属性として構成されます。入力フィールドが変更されるたびに、属性も変更されます。

ここで、MealSearchComponent の属性が変更されたときに常にトリガーされる「searchMeal」関数を実装したいと考えています。

私はすでにMealSearchComponentMealListComponent にインポートしようとしました。しかし、依存関係がなく、コンポーネントのルールに違反しているようです。

4

1 に答える 1

0

Shadow DOM の外部からの JavaScript は、プロパティを介して Shadow DOM にアクセスできますelement.ShadowRoot。

于 2020-08-20T13:09:46.103 に答える