A. HTML Imports:
HTML Imports provides a declarative way to load HTML resources into a document.
B. HTML Templates :
HTML Templates allow us to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime. This is an essential part when it comes to creating Shadow DOM.
Quick Example ?????
POInts to remember:
a. Wrapping content in a <template> gives us few important properties.
b. Its content is effectively inert until activated. Essentially, your markup is hidden DOM and does not render.
c. Any content within a template won’t have side effects. Script doesn’t run, images don’t load, audio doesn’t play…until the template is used.
d. Content is considered not to be in the document.
e. Using document.getElementById() or querySelector() in the main page won’t return child nodes of a template.
f. Templates can be placed anywhere inside of <head>, <body> or <frameset> and can contain any type of content which is allowed in those elements.
g. “Anywhere” means that <template> can safely be used in places that the HTML parser disallows…all but content model children. It can also be placed as a child of <table> or <select>.
There’s no rule saying that all four specifications are mandatory for building web components.
You are free to choose the right flavor for your taste.….
C. Browser Support
D. Why Web Components??
Faster — Web Components are faster as custom HTML elements are understood by the browser and don’t require to load any external dependencies in the browser in order to render Web Components.
Encapsulation — Web Components encapsulate logic and UI making it cleaner and easy to use.
Please feel free to comment, ask questions, what you disliked about this post and any suggestion or feedback to improve would definitely be helpful #MAKING COMPLEX THINGS SIMPLER TOGETHER.