select all child components LWC

Question

Hello guys I would like to use querSelectorAll() to select all of my child components. They have the followed name: 'c-lwc-Component', 'c-lwc-Search', 'c-lwc-Product'... I was thinking of using this structure: querSelectorAll('c-lwc-*') but it ain't working.

Is this possible? Am I doing it right? Could someone put an example? Thanks

Answer 1

You can try to list them for a single query

const components = this.template.querySelectorAll('c-lwc-Component', 'c-lwc-Search', 'c-lwc-Product');

https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll#obtaining_a_list_of_matches

Answer 2

You can also try this, selects all the elements in the component's template whose class attribute starts with "c-lwc-"

const components = this.template.querySelectorAll('[class^="c-lwc-"]');