How to build software using Web Components

1. Create a class which extends a standard HTMLElement.
2. Register it with a tag name using customElements.define(yourTagName, YourComponent).

To set the default style of a web component:

• define a <style> tag in your component's template.
• import an external CSS file as a string, using:
  • an import assertion
  • a webpack CSS loader
  • a vite `?raw` suffix
  • implicitly in svelte

To customize an existing style of the web component from the light DOM, you can:

• use CSS variables (custom properties) that will be read by the component.
• style some ::part defined by the component