I'm building a dashboard on my site so my customers can more easily visualize their data. I'm going to provide graphing widgets which the customer will be able to configure to view their data however they like.
I would also like to allow my users to provide their own widgets which they can upload to a registry I control, and then view those widgets in their dashboards.
I was thinking of using web components as the interface for widgets. Is it possible to sandbox web components similar to how a iframe would be sandboxed? I don't want user-provided widgets to be able to access cookies or other data on the page. I also can not manually audit every version of every widget that gets pushed to the registry.
That isn't really what you get from web components. They are isolated, in that they can have Shadow DOM and their own CSS and JS that doesn't interfere with the page, but inside them you can still run JS and access window.
Shadow DOM will help avoid accidentally leaking styles or clashing with other components, but it isn't a sandbox that will stop a purposeful attack.
What you could do with components is build the sandbox in a way that's easy to re-use across your app.
Alternatively, the security sandbox aside, web components are a good way to build a store/registry like this, but anyone building those components is going to have to follow your API/rules and submit to your store. Depending on your security context it may be simpler to put something in your licensing agreements with the suppliers and your users (something like "use this component at own risk") similar to what big registries like npm do.