Web components are a solution to that issue. They are written using native web technologies, are self-contained and expose values and behaviours through attributes like any other HTML element.
They are made up of three separate specifications – HTML templates, shadow DOM and custom elements.
HTML templates define the visual appearance of a component. They contain the structure of content, which can then be copied and reused for each component on the page.
Shadow DOM is a concept of keeping the internal markup of the component away from the rest of the document. This keeps styles and other logic from breaking out and affecting other components.
Finally, custom elements are the glue that holds everything together. They are responsible for the lifecycle of the component, which can include extra logic for when a component is added or removed from the page.
Web components can be used alongside their framework counterparts. As they are supposed to act like native elements, most frameworks will work with them without issue. Some frameworks, like Angular, may need to be told of their existence ahead of time to function properly.
As they can be readily composed together, components can be imported from many sources. Websites like webcomponents.org provide several ready-made elements that can be dropped in and used straight away.
While the concept of a web component has been around since 2011, the specifications have constantly changed. In 2018 things settled down, with Firefox implementing the latest versions of shadow DOM and custom elements specifications in October. With Edge due to ship their implementations in 2019, all major browsers will natively support them. • webcomponents.org