There is built-in support for web components in the theme files folder components.
Add the code into the file in components folder, as this is renedered with liquid it is possible to add in liquid code in the file.
Include the component code to the site with tag {% component '<component file name>' %}.
If using multiple components, a good practise, to decrease the payload and utilize the browser cache, is to include all the components to the same js-file in assets folder and include in the theme with {{ '<file name>.js.liquid' | asset_url | script_tag }} but note that one should remove the script tags in the component file.