For years, you’ve probably been beating the drum of the wise web professional — separate your HTML from your CSS from your JavaScript. Well, you don’t have to forget those best practices, but Web Components is going to take you down a path that might make you rethink those rules.
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)
Using Polymer, you will get support for all browsers (only Chrome and Opera have full support natively), and start building small web “components” that have their own self-contained class-rich and ID-rich HTML, CSS, and JavaScript, and can be embedded almost anywhere on the web.
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:
webcomponents.org
Polymer Project
github.com/chadkillingsworth/msu-activitystream
Chad Killingsworth
Senior Javascript Engineer, Team Lead, Jack Henry and Associates
https://2016reg.highedweb.org/psessions/detail/49d6e8a2-7199-43f4-aaab-8c16f844d20a