A quick reference guide to Web Components for yours truly or anyone else who happens by. MDN is the source, as ever.
The four building blocks of Web Components are:
- Custom Elements
- HTML Template
- HTML Import
- Shadow DOM
Custom Elements is a capability for creating your own custom HTML tags and elements. They can have their own scripted behavior and CSS styling. They are part of Web Components but they can also be used by themselves. Custom Elements raison d'etre is to provide lifecycle callbacks, which were not previously available.
Think of a template as a content fragment that is being stored for subsequent use in the document. While the parser does process the contents of the element <template> while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered, however. Similar to the <defs> element in SVG.
Why would you want to keep some code separate from the rest of the page? One reason is that on a large site, for example, if the CSS is not carefully organized, the styling for the navigation can "leak" into the main content area where it was not intended to go, or vice-versa. As a site or an app scales, this kind of thing becomes difficult to avoid.
HTML Imports is intended to be the packaging mechanism for Web Components, but you can also use HTML Imports by itself. Firefox won't be implementing as per below.
Google provides the required polyfill for HTML Imports and other Web Component goodies.
To keep up with developments check here -