GETTING FAMILIAR WITH HTML5 WEB COMPONENT
Tags: html, webdev, begineers, tutorial
Published: 2019-07-09 14:26:39

<p><span style="font-weight: 400;">&nbsp;</span><span style="font-weight: 400;">Web Component is a feature that is being incorporated in HTML5 DOM Specifications by W3C.</span></p>
<p><span style="font-weight: 400;">Web Components are a set of APIs&rsquo; that allow you to create new custom, reusable, encapsulated HTML tags to use in web apps. Custom Components and widgets build on the web Component standard, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.</span></p>
<p><span style="font-weight: 400;">Web Components are based on existing web standards. Feature to Support web Components are currently being added to the HTML and DOM specs, letting web developers easily extends HTML with new elements with encapsulated styling and custom behaviour</span><span style="font-weight: 400;">.</span></p>
<p><strong>Web Component building blocks:</strong></p>
<p><span style="font-weight: 400;">1.Custom Elements:</span><span style="font-weight: 400;">&nbsp;</span></p>
<p><span style="font-weight: 400;">Custom elements API provides developer with the ability to create fully featured standalone DOM elements having their own behaviour and CSS styling. Below is one such example. Where we create an Element showing Movies And its Description&nbsp;&nbsp;</span></p>
<ol>
<li style="font-weight: 400;"><span style="font-weight: 400;">&lt;!DOCTYPE&nbsp;html</span><strong>&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;html</strong><span style="font-weight: 400;">&nbsp;</span><span style="font-weight: 400;">lang</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"en"</span><strong>&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;head&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;meta</strong><span style="font-weight: 400;">&nbsp;</span><span style="font-weight: 400;">charset</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"UTF-8"</span><strong>&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;meta</strong><span style="font-weight: 400;">&nbsp;</span><span style="font-weight: 400;">name</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"viewport"</span><span style="font-weight: 400;">&nbsp;</span><span style="font-weight: 400;">content</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"width=device-width,&nbsp;initial-scale=1.0"</span><strong>&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;meta</strong><span style="font-weight: 400;">&nbsp;</span><span style="font-weight: 400;">http-equip</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"X-UA-Compatible"</span><span style="font-weight: 400;">&nbsp;</span><span style="font-weight: 400;">content</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"ie=edge"</span><strong>&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;title&gt;</strong><span style="font-weight: 400;">Template&nbsp;Demo</span><strong>&lt;/title&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;/head&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;body&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Hello&nbsp;World&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;template</strong><span style="font-weight: 400;">&nbsp;</span><span style="font-weight: 400;">id</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"tmpTopMovies"</span><strong>&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;h3&gt;</strong><span style="font-weight: 400;">&nbsp;Movie&nbsp;Name&nbsp;</span><strong>&lt;/h3&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;p&gt;</strong><span style="font-weight: 400;">&nbsp;Desc&nbsp;</span><strong>&lt;/p&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;/template&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;div</strong><span style="font-weight: 400;">&nbsp;</span><span style="font-weight: 400;">id</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"tmpPlaceholder"</span><strong>&gt;&lt;/div&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;script&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">let&nbsp;</span><span style="font-weight: 400;">movies</span><span style="font-weight: 400;">&nbsp;=&nbsp;[&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">{name&nbsp;:&nbsp;"Lord&nbsp;of&nbsp;Rings",&nbsp;detail&nbsp;:&nbsp;"Some&nbsp;info&nbsp;about&nbsp;Lord&nbsp;of&nbsp;Rings"},&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">{name&nbsp;:&nbsp;"Star&nbsp;Wars",&nbsp;detail&nbsp;:&nbsp;"Some&nbsp;info&nbsp;about&nbsp;Star&nbsp;Wars"},&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">];&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">let&nbsp;</span><span style="font-weight: 400;">t</span><span style="font-weight: 400;">&nbsp;=&nbsp;</span><span style="font-weight: 400;">document</span><span style="font-weight: 400;">.querySelector('#tmpTopMovies');&nbsp;&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">let&nbsp;</span><span style="font-weight: 400;">pholder</span><span style="font-weight: 400;">&nbsp;=&nbsp;</span><span style="font-weight: 400;">document</span><span style="font-weight: 400;">.querySelector('#tmpPlaceholder');&nbsp;&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">for(i&nbsp;in&nbsp;movies)</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">{&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">t.content.querySelector('h3')</span><span style="font-weight: 400;">.innerText</span><span style="font-weight: 400;">&nbsp;=&nbsp;</span><span style="font-weight: 400;">movies</span><span style="font-weight: 400;">[i].name;&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">t.content.querySelector('p')</span><span style="font-weight: 400;">.innerText</span><span style="font-weight: 400;">&nbsp;=&nbsp;</span><span style="font-weight: 400;">movies</span><span style="font-weight: 400;">[i].detail;&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">let&nbsp;</span><span style="font-weight: 400;">clone</span><span style="font-weight: 400;">&nbsp;=&nbsp;</span><span style="font-weight: 400;">document</span><span style="font-weight: 400;">.importNode(t.content,true);&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">pholder.appendChild(clone);&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">}&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;/script&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;/body&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;/html&gt;</strong><span style="font-weight: 400;">&nbsp;</span></li>
</ol>
<p><span style="font-weight: 400;">In the Above Example there is a template containing Movies Name and Description of the movie. And It is handled by JavaScript. In JS there is an array containing&nbsp;name and details. And adding these array-element to template.</span></p>
<ol start="2">
<li><span style="font-weight: 400;"> Shadow DOM.</span></li>
</ol>
<p><span style="font-weight: 400;">A shadow tree is a node tree whose root is a shadow root. Shadow DOM provides style and mark-up encapsulation. To create shadow DOM, select an element and call its createShadowRoot method which returns a fragment to which you can append content. This fragment returned is called as Shadow Root. The shadow root and its children are not visible to the user, but browser renders them when it encounters our tag. It allows to isolate DOM of our component and scope and simplify CSS.</span><br /><br /></p>
<ol>
<li style="font-weight: 400;"><strong>&lt;style&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;/*&nbsp;document&nbsp;style&nbsp;won't&nbsp;apply&nbsp;to&nbsp;the&nbsp;shadow&nbsp;tree&nbsp;inside&nbsp;#elem&nbsp;(1)&nbsp;*/&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;p&nbsp;{&nbsp;color:&nbsp;red;&nbsp;}&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;/style&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;div</strong><span style="font-weight: 400;">&nbsp;</span><span style="font-weight: 400;">id</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"elem"</span><strong>&gt;&lt;/div&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;script&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;elem.attachShadow({mode:&nbsp;'open'});&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;shadow&nbsp;tree&nbsp;has&nbsp;its&nbsp;own&nbsp;style&nbsp;(2)&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span><span style="font-weight: 400;">elem.shadowRoot.innerHTML</span><span style="font-weight: 400;">&nbsp;=&nbsp;`&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;</span><strong>&lt;style&gt;</strong><span style="font-weight: 400;">&nbsp;p&nbsp;{&nbsp;font-weight:&nbsp;bold;&nbsp;}&nbsp;</span><strong>&lt;/style&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;</span><strong>&lt;p&gt;</strong><span style="font-weight: 400;">Hello,&nbsp;John!</span><strong>&lt;/p&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;`;&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">//</span><strong>&lt;p&gt;</strong><span style="font-weight: 400;">&nbsp;is&nbsp;only&nbsp;visible&nbsp;from&nbsp;queries&nbsp;inside&nbsp;the&nbsp;shadow&nbsp;tree&nbsp;(3)&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;alert(document.querySelectorAll('p').length);&nbsp;//&nbsp;0&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;alert(elem.shadowRoot.querySelectorAll('p').length);//&nbsp;1&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;/script&gt;</strong><span style="font-weight: 400;">&nbsp;</span></li>
</ol>
<p><span style="font-weight: 400;">Description:&nbsp;</span></p>
<p><span style="font-weight: 400;">Shadow DOM is a way to create a component-local DOM.</span></p>
<p><span style="font-weight: 400;">shadowRoot = elem.attachShadow({mode: open|closed}) &ndash; creates shadow DOM for elem. If mode="open", then it&rsquo;s accessible as elem.shadowRoot property.</span></p>
<p><span style="font-weight: 400;">We can populate shadowRoot using innerHTML or other DOM methods.</span></p>
<ol start="3">
<li><span style="font-weight: 400;"> HTML Templates:</span></li>
</ol>
<p><span style="font-weight: 400;">It defines a new &lt;template&gt; element, which creates chunks of HTML. Templates allow declaration of mark-up fragments which are parsed by the browser as HTML and are not interpreted at page load time but can be used at a later stage. These templates can be instantiated, cloned and reused. Everything inside a &lt;template&gt; tag is considered as inert by the browser.</span></p>
<ol>
<li style="font-weight: 400;"><strong>&lt;template&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;</span><strong>&lt;p&gt;</strong><span style="font-weight: 400;">Hello&nbsp;There.</span><strong>&lt;/p&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;</span><strong>&lt;p&gt;</strong><span style="font-weight: 400;">I&nbsp;m&nbsp;a&nbsp;template</span><strong>&lt;/p&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;/template&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
</ol>
<ol start="4">
<li><span style="font-weight: 400;"> HTML Imports:</span></li>
</ol>
<p><span style="font-weight: 400;">Using HTML templates, you can define templates. But what if the HTML mark-up is quite large, your HTML file will look shabby. Won&rsquo;t it be good if we can keep our template in a separate file? HTML import is here to our rescue. HTML imports allow to import templates from different HTML files. You can organize your templates in different files and then import them as below: -</span></p>
<ol>
<li style="font-weight: 400;"><strong>&lt;link</strong><span style="font-weight: 400;">&nbsp;</span><span style="font-weight: 400;">rel</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"import"</span><span style="font-weight: 400;">&nbsp;</span><span style="font-weight: 400;">href</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"mydocument.html"</span><strong>&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
</ol>
<p><span style="font-weight: 400;">Example:&nbsp;</span></p>
<p><span style="font-weight: 400;">Below is an example of an Image Slider Web Component that changes the image after every 1500ms and updated the image title.</span></p>
<p><span style="font-weight: 400;">HTML:</span></p>
<ol>
<li style="font-weight: 400;"><span style="font-weight: 400;">&lt;!DOCTYPE&nbsp;html</span><strong>&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;html</strong><span style="font-weight: 400;">&nbsp;</span><span style="font-weight: 400;">lang</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"en"</span><strong>&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;head&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;meta</strong><span style="font-weight: 400;">&nbsp;</span><span style="font-weight: 400;">charset</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"UTF-8"</span><strong>&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;meta</strong><span style="font-weight: 400;">&nbsp;</span><span style="font-weight: 400;">name</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"viewport"</span><span style="font-weight: 400;">&nbsp;</span><span style="font-weight: 400;">content</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"width=device-width,&nbsp;initial-scale=1.0"</span><strong>&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;meta</strong><span style="font-weight: 400;">&nbsp;</span><span style="font-weight: 400;">http-equip</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"X-UA-Compatible"</span><span style="font-weight: 400;">&nbsp;</span><span style="font-weight: 400;">content</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"ie=edge"</span><strong>&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;title&gt;</strong><span style="font-weight: 400;">Template&nbsp;Demo</span><strong>&lt;/title&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;/head&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;body&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Image&nbsp;Slide&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;template</strong><span style="font-weight: 400;">&nbsp;</span><span style="font-weight: 400;">id</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"image-slider-template"</span><strong>&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;div</strong><span style="font-weight: 400;">&nbsp;</span><span style="font-weight: 400;">class</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"image-container"</span><strong>&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;h4</strong><span style="font-weight: 400;">&nbsp;</span><span style="font-weight: 400;">class</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"image-title"</span><strong>&gt;&lt;/h4&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;/div&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;/template&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;image-slider</strong><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">data-images</span><span style="font-weight: 400;">=</span><span style="font-weight: 400;">"https://pluralsight.imgix.net/paths/path-icons/nodejs-601628d09d.png,https://camo.githubusercontent.com/eb464a60a4a47f8b600aa71bfbc6aff3fe5c5392/68747470733a2f2f7261772e6769746875622e636f6d2f766f6f646f6f74696b69676f642f6c6f676f2e6a732f6d61737465722f6a732e706e67,https://camo.githubusercontent.com/891e94cd8dda7f40f451bb27067be513c230318a/68747470733a2f2f7261772e6769746875622e636f6d2f766f6f646f6f74696b69676f642f6c6f676f2e6a732f6d61737465722f626f676a732f6a732e706e67"</span><span style="font-weight: 400;">&nbsp;</span><strong>&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;/image-slider&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;/body&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><strong>&lt;/html&gt;</strong><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
</ol>
<p><span style="font-weight: 400;">JavaScript:</span></p>
<ol>
<li style="font-weight: 400;"><span style="font-weight: 400;">&lt;script&gt;</span></li>
<li style="font-weight: 400;"><strong>class</strong><span style="font-weight: 400;">&nbsp;ImageSlider&nbsp;</span><strong>extends</strong><span style="font-weight: 400;">&nbsp;HTMLElement&nbsp;{&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;constructor()&nbsp;{&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;</span><span style="font-weight: 400;">//&nbsp;If&nbsp;you&nbsp;define&nbsp;a&nbsp;constructor,&nbsp;always&nbsp;call&nbsp;super()&nbsp;first&nbsp;as&nbsp;it&nbsp;is&nbsp;required&nbsp;by&nbsp;the&nbsp;CE&nbsp;spec.</span><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;</span><strong>super</strong><span style="font-weight: 400;">();&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;connectedCallback()&nbsp;{&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;</span><strong>debugger</strong><span style="font-weight: 400;">;&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;</span><strong>const</strong><span style="font-weight: 400;">&nbsp;shadowRoot&nbsp;=&nbsp;</span><strong>this</strong><span style="font-weight: 400;">.attachShadow({&nbsp;mode:&nbsp;</span><span style="font-weight: 400;">"open"</span><span style="font-weight: 400;">&nbsp;});&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;</span><strong>const</strong><span style="font-weight: 400;">&nbsp;template&nbsp;=&nbsp;document.querySelector(</span><span style="font-weight: 400;">"#image-slider-template"</span><span style="font-weight: 400;">);&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;</span><strong>const</strong><span style="font-weight: 400;">&nbsp;instance&nbsp;=&nbsp;template.content.cloneNode(</span><strong>true</strong><span style="font-weight: 400;">);&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;shadowRoot.appendChild(instance);&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;</span><strong>this</strong><span style="font-weight: 400;">.images&nbsp;=&nbsp;</span><strong>this</strong><span style="font-weight: 400;">.getAttribute(</span><span style="font-weight: 400;">"data-images"</span><span style="font-weight: 400;">).split(</span><span style="font-weight: 400;">","</span><span style="font-weight: 400;">);&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;imageContainer&nbsp;=&nbsp;</span><strong>this</strong><span style="font-weight: 400;">.shadowRoot.querySelector(</span><span style="font-weight: 400;">".image-container"</span><span style="font-weight: 400;">);&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;imageContainer.style.height&nbsp;=&nbsp;</span><span style="font-weight: 400;">'200px'</span><span style="font-weight: 400;">;&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;imageContainer.style.width&nbsp;=&nbsp;</span><span style="font-weight: 400;">'200px'</span><span style="font-weight: 400;">;&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;imageContainer.style.backgroundSize&nbsp;=&nbsp;</span><span style="font-weight: 400;">"contain"</span><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;imageContainer.style.backgroundImage&nbsp;=&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="font-weight: 400;">"url("</span><span style="font-weight: 400;">&nbsp;+&nbsp;</span><strong>this</strong><span style="font-weight: 400;">.images[0]&nbsp;+&nbsp;</span><span style="font-weight: 400;">")"</span><span style="font-weight: 400;">;&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;</span><strong>this</strong><span style="font-weight: 400;">.shadowRoot.querySelector(</span><span style="font-weight: 400;">".image-title"</span><span style="font-weight: 400;">).innerHTML&nbsp;=&nbsp;</span><span style="font-weight: 400;">"Image&nbsp;"</span><span style="font-weight: 400;">&nbsp;+&nbsp;1;&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;</span><strong>this</strong><span style="font-weight: 400;">.toggleImage();&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;}&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;toggleImage()&nbsp;{&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;currentImage&nbsp;=&nbsp;1;&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;images&nbsp;=&nbsp;</span><strong>this</strong><span style="font-weight: 400;">.images;&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;shadowRoot&nbsp;&nbsp;=&nbsp;</span><strong>this</strong><span style="font-weight: 400;">.shadowRoot;&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;setInterval(</span><strong>function</strong><span style="font-weight: 400;">()&nbsp;{&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><strong>if</strong><span style="font-weight: 400;">&nbsp;(currentImage&nbsp;&gt;&nbsp;images.length)&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentImage&nbsp;=&nbsp;1;&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><strong>debugger</strong><span style="font-weight: 400;">;&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;shadowRoot.querySelector(</span><span style="font-weight: 400;">".image-container"</span><span style="font-weight: 400;">).style.backgroundImage&nbsp;=&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="font-weight: 400;">'url('</span><span style="font-weight: 400;">&nbsp;+&nbsp;images[currentImage&nbsp;-&nbsp;1]&nbsp;+&nbsp;</span><span style="font-weight: 400;">')'</span><span style="font-weight: 400;">;&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;shadowRoot.querySelector(</span><span style="font-weight: 400;">".image-title"</span><span style="font-weight: 400;">).innerHTML&nbsp;=&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="font-weight: 400;">"Image&nbsp;"</span><span style="font-weight: 400;">&nbsp;+&nbsp;currentImage;&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentImage++;&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;1500);&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">}&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">customElements.define(</span><span style="font-weight: 400;">"image-slider"</span><span style="font-weight: 400;">,&nbsp;ImageSlider);&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&lt;/script&gt;</span></li>
</ol>
<p><span style="font-weight: 400;">Now that we know which specifications web components leverage, let's look at a custom element's lifecycle. I know, I know, we'll get to the code soon!</span></p>
<p><span style="font-weight: 400;">&nbsp;</span><span style="font-weight: 400;">&nbsp;</span><span style="font-weight: 400;">A component's lifecycle:</span></p>
<ol>
<li style="font-weight: 400;"><strong>class</strong><span style="font-weight: 400;">&nbsp;MyElement&nbsp;</span><strong>extends</strong><span style="font-weight: 400;">&nbsp;HTMLElement&nbsp;{&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;constructor()&nbsp;{&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="font-weight: 400;">//&nbsp;always&nbsp;call&nbsp;super()&nbsp;first</span><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><strong>super</strong><span style="font-weight: 400;">();&nbsp;&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(</span><span style="font-weight: 400;">'constructed!'</span><span style="font-weight: 400;">);&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp; connectedCallback()&nbsp;{&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(</span><span style="font-weight: 400;">'connected!'</span><span style="font-weight: 400;">);&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">disconnectedCallback()&nbsp;{&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(</span><span style="font-weight: 400;">'disconnected!'</span><span style="font-weight: 400;">);&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;attributeChangedCallback(name,&nbsp;oldVal,&nbsp;newVal)&nbsp;{&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(`Attribute:&nbsp;${name}&nbsp;changed!`);&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;adoptedCallback()&nbsp;{&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(</span><span style="font-weight: 400;">'adopted!'</span><span style="font-weight: 400;">);&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">}&nbsp;</span></li>
</ol>
<p><span style="font-weight: 400;">Following are the methods of a component life cycle:</span></p>
<ul style="list-style-type: circle;">
<li style="font-weight: 400;"><span style="font-weight: 400;">constructor():</span></li>
</ul>
<p><span style="font-weight: 400;">The constructor runs whenever an element is created, but before the element is attached to the document. We'll use the constructor for setting some initial state, event listeners, and creating the shadow DOM.</span></p>
<ul style="list-style-type: circle;">
<li><span style="font-weight: 400;">connectedCallback():</span></li>
</ul>
<p><span style="font-weight: 400;">The connectedCallback is called when the element is inserted to the DOM. It's a good place to run setup code, like fetching data, or setting default attributes.</span></p>
<ul style="list-style-type: circle;">
<li style="font-weight: 400;"><span style="font-weight: 400;">disconnectedCallback() :</span></li>
</ul>
<p><span style="font-weight: 400;">The disconnectedCallback is called whenever the element is removed from the DOM. Clean up time! We can use the disconnectedCallback to remove any event listeners or cancel intervals.</span></p>
<ul style="list-style-type: circle;">
<li style="font-weight: 400;"><span style="font-weight: 400;">attributeChangedCallback(name, oldValue, newValue) :</span></li>
</ul>
<p><span style="font-weight: 400;">The attributeChangedCallback is called any time your element's observed attributes change. We can observe an element's attributes by implementing a static observedAttributes getter.</span></p>
<ul style="list-style-type: circle;">
<li style="font-weight: 400;"><span style="font-weight: 400;">adoptedCallback():</span></li>
</ul>
<p><span style="font-weight: 400;">The adoptedCallback is called each time the custom element is moved to a new document. You'll only run into this use case when you have &lt;iframe&gt; elements in your page.</span></p>
<p><span style="font-weight: 400;"><br /><br /></span></p>
<p><br /><br /><br /></p>