# Learn Basic for Strong Foundation (LESSON #1A ) Building Blocks of Web Components

A. HTML Imports:

HTML Imports provides a declarative way to load HTML resources into a document.

HTML Imports, part of the Web Components cast, is a way to include HTML documents in other HTML documents. You’re not limited to markup either. An import can also include CSS, JavaScript, or anything else an .html file can contain. In other words, this makes imports a fantastic tool for loading related HTML/CSS/JS.


B. HTML Templates :

When you have to reuse the same markup structures repeatedly on a web page, it makes sense to use some kind of a template rather than repeating the same structure over and over again. This was possible before, but it is made a lot easier by the HTML template element. This element and its contents are not rendered in the DOM, but it can still be referenced using JavaScript.

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 ?????

This won’t appear in your page until you grab a reference to it with JavaScript and then append it to the DOM, using something like the following:

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 playuntil 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. Anywheremeans 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. 

Each specification can work stand alone too. Some developers love using only the custom elements spec, some love using ES Modules instead of HTML Imports, and some use TypeScript instead of pure JavaScript.

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.

Re usability Unlike frameworks or libraries, Web Components are reusable across projects as they are built using HTML, CSS, JavaScript which are rendered by browsers.


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.

One thought on “# Learn Basic for Strong Foundation (LESSON #1A ) Building Blocks of Web Components

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s