How can a web component be integrated into an app?

[AndrewGilbert]

I'm looking at @MattDriscoll's repo here from the 2022 dev summit, which I attended. I understand how to make a reusable web component (I'm using Stencil), but how can a web component be integrated into an app?

For example, say I have a simple app that just shows a map. If I make a web component that shows a little box with a list of layers (just a hypothetical example), how do I import that web component into my app such that the list of layers shows up on top of the map? And how do I hook up communication between the web component and map?

I'm considering using React as a framework in the web component and/or app, but I'm not sure how that plays into either. Therefore I'd be interested in knowing how this is done with or without React.

I'm using the latest ArcGIS JSAPI, TypeScript, and Vite. Thanks!

[ReneRubalcava · Accepted solution]

Here is an app that uses calcite-components and Vue to help give you an idea.

https://github.com/odoe/nearby-app

There is a Frameworks integration section to the doc too.

https://developers.arcgis.com/calcite-design-system/frameworks/

There is a section on React, using the calcite-components-react, which is a build that has React components to wrap calcite-components, makes it a little easier to pass props and add listeners to the components.