The UI for the wallet provider selector is made available through a custom element. Custom elements are easy to integrate in just about any web project. Methods detailed in Selector API are provided to interact with the selector.
The selector uses Solid for component logic and reactivity. Solid has a build-time compiler and no runtime, ideal for creating performant and compact shareable components.
Solid, like other popular component frameworks, is usually used to manipulate the DOM. To encapsulate the selector's logic into a custom element, the solid-element package is used.
Styles for the selector are in the form of inline styles or <style> tags in the source. There doesn't seem to be a better solution for managing styles when building a custom element.
Styling solutions usually have a tight integration with the build process and emit CSS assets or add code that inserts <style> tags into the <header>. In general, these approaches don't work with custom elements which are defined at run time: there's nothing to inject the styles into during the build process. Dedicated frameworks like Polymer and Stencil exist to overcome this issue, although they currently have fewer Github stars and seem to use more component complex abstractions.
The selector uses a CSS reset that has been adapted for custom elements. For convenience, all margins have also been removed using the reset.
Styles may break when using Portals. By default, they render elements directly into the body and outside of the influence of the styles defined within the custom element.
The DM Sans font used by the selector is added to the document's <head> in a <link> tag and referenced in the CSS reset. Global fonts can be referenced within custom elements, although importing a font within a custom element doesn't seem to be working.
The selector is built with Ark UI components. They're headless components, meaning they're functional, yet carry no styles and can be styled as needed.