I've written a blog post about Web Components and the benefits of using them if you're interested in learning further.
Using web components
Because web components are custom HTML elements, in order to distinguish them from the native HTML elements, there are a few rules we need to follow:
- Do not use self-closing tags.
<sc-button />will not be recognised. Always use the open-close pairs like
- All Soft Components has
sc-in the beginning of their tags because custom elements need to be unique. So beware if you're intended to use any other component library that uses a
All component documentation pages contains the code preview area that allows you to play with the provided CSS properties and different props. We also included a link to view the elements in Codepen so you can experiment with it further.