The goal for this arcitecture is to seperate the (small) parts of our interface into it's own, independent, components. If we create small independent components we make heavily use of reusability and single-responsibility. An interface can consist of different types of components: from simple “leaf” components like buttons or inputs, to more complex compound components such as a log-in form, which itself consists of a number of other components.
I personally tend to seperate my components into two categories: leaf components and compound components. Leaf components are small and independent components such as buttons and inputs. Compound components are more complex such as forms or a navigation. A compound component will likely consist of a number of other components that communicates with other via events or a store.
Will this work in every browser? Yes, with the appropriate polyfills. Browsers like Chroms, Safari and Firefox support most features natively. With Edge announcing their intent to adopt the Chromium engine, soon all major browsers will natively support Web Components 🎉.
In truth, the uptake for web components has been pretty slow, but it has seen a recent boost mostly due to improved browser support. Fortunately, Web Components are fully polyfill-able, which allows us to achieve backward compatibility for older browsers that don’t natively support Web Components, such as Internet Explorer. This can, however, make polyfilled browsers performance slower.Example
Thank you for reading! :)