Imagine you have a content widget that you want to use on multiple pages, something like a random profile of a team member. Perhaps you want your widget to always have the same fonts and colors. Or maybe you want the widget to inherit styles from the page it’s being included in. You can do either with Web Components!
Web Components comprise four discrete specifications:
- Custom HTML elements (this will always have a hyphen)
- HTML imports (you can bring in mixed content all together)
- Template elements (put an XML DOM in your content that is inert, but helps to keep the structure of your components together)
- Shadow DOM (your own DOM tree that’s not visible to the document)
Potential performance issues come along with Web Components, but using HTTP2 and strong cacheing headers can help.
If you want to learn more on how to implement Web Components in your projects, Chad shared some relevant links: