{"id":6726,"date":"2019-02-03T13:51:09","date_gmt":"2019-02-03T18:51:09","guid":{"rendered":"https:\/\/www.jitendrazaa.com\/blog\/?p=6726"},"modified":"2019-02-03T13:53:24","modified_gmt":"2019-02-03T18:53:24","slug":"introduction-to-html-web-components","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/introduction-to-html-web-components\/","title":{"rendered":"Introduction to HTML Web Components"},"content":{"rendered":"\n<p class=\"justify\">Modern browsers have become so advanced and powerful that there is almost no or minimal need of Javascript libraries these days. There was time when web developers rely heavily on frameworks like JQuery, Angular or React. Same for Salesforce, when it launched <strong>Aura framework<\/strong> in 2014. <\/p>\n\n\n\n<p class=\"justify\">In last 5 years, web browsers have evolved so much that we need to revisit and check ourselves that do we really need libraries or frameworks for every small functionalities ? Considering rich feature set browsers, Salesforce already revisited aura framework and decided that it&#8217;s time to make it more lightweight and use native browser capabilities as much as possible. Welcome <strong><a href=\"https:\/\/www.jitendrazaa.com\/blog\/tag\/lightning-web-component\/\">Lightning\u00a0Web\u00a0Components<\/a>\u00a0!!!\u00a0<\/strong>Before we jump into ocean of Lightning Web Components, it&#8217;s important to understand what is supported by browsers natively ? Out of many features supported by modern browsers, one of most important one is <strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Web_Components\">Web\u00a0Component<\/a>.<\/strong><\/p>\n\n\n\n<p>Below are 4 pillars of Web Components<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Templates<\/li><li>Custom Element<\/li><li>Shadow DOM<\/li><li>Imports<\/li><\/ol>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">1. Templates<\/h2>\n\n\n\n<p class=\"justify\">It allows writing markup inside &lt;template> tag which is <strong>not rendered<\/strong> on browser. This is pretty powerful tag and part of HTML 5 specification. It is used to define how content would be displayed &amp; formatted. Same &lt;template> tag can be reused throughout the document. In below example, I have a JSON object with list of movies. If I need to display movie list with name and description, template can be used to achieve this. If you notice in html code of &lt;template, <em>Movie\u00a0Name\u00a0and\u00a0Description,<\/em>\u00a0placeholders are not displayed on browser. Read more about <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/template\">Templates here<\/a>.<\/p>\n\n\n\n<script async src=\"\/\/jsfiddle.net\/ilovenagpur\/e2dvxjqn\/9\/embed\/result,html,js\/\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">2. Custom Element<\/h2>\n\n\n\n<p class=\"justify\">Above example of displaying movie list can also be accomplished by second pillar of Web Component which is <strong>Custom\u00a0Element.<\/strong>\u00a0We can create a custom HTML tag named <strong>movie-card<\/strong> with <em>name<\/em> and <em>detail<\/em> attribute.  It will give similar output as of example 1 where we used Template. Let&#8217;s not get confused on what should we use, Template vs Custom Element. All I want to show is how Custom Element of Web Component can be used.<\/p>\n\n\n\n<script async src=\"\/\/jsfiddle.net\/ilovenagpur\/w6rp3a1q\/4\/embed\/result,html,js\/\"><\/script>\n\n\n\n<p class=\"justify\">As shown in above example, Javascript file. Custom Element must extend class <strong>HTMLElement<\/strong>. For every attribute, in our case <em>name<\/em> and <em>detail<\/em> should have <strong>getter and setter<\/strong> methods. We need to use <strong>window.customElements.define<\/strong> method to let browser know which one is custom element. Also, there are some Life Cycle methods like <strong>connectedCallback<\/strong> and <strong>disconnectedCallback<\/strong> in custom element if want to perform some operations on those events. Read more about <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Web_Components\/Using_custom_elements\">Custom Elements<\/a> here.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Shadow DOM<\/h2>\n\n\n\n<p class=\"justify\">Another important aspect of HTML Web Component is <strong>Shadow DOM<\/strong>. Using <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Web_Components\/Using_shadow_DOM\">Shadow DOM<\/a>, we can encapsulate structure and style from other elements. Shadow DOM can have different style without impacting style of other elements. In below example, paragraph tag of main body has red color however paragraph tag of shadow dom is blue. We don&#8217;t need to use separate CSS classes for same element if we want to encapsulate them.<\/p>\n\n\n\n<script async src=\"\/\/jsfiddle.net\/ilovenagpur\/bvkwer9c\/3\/embed\/result,html,js\/\"><\/script>\n\n\n\n<p class=\"justify\">To declare any custom Element as shadow DOM, we need to call method <strong>attachShadow<\/strong> as shown in above javascript. Read more about <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Web_Components\/Using_shadow_DOM\">Shadow DOM here<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Import<\/h2>\n\n\n\n<p class=\"justify\">How do you import Javascript and CSS in HTML ? Using Link or Script.. What is basic building block on any web page ? its HTML. And do you import it if needed ? Think about it.. iframe ? AJAX ? <\/p>\n\n\n\n<p class=\"justify\">So, most basic building block in web page is on mercy of hacks or iframe, no straight way. As part of web components, we can import another HTML page just with link tag as shown below<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;head&gt;\n  &lt;link rel=&quot;import&quot; href=&quot;\/path\/to\/imports\/somePage.html&quot;&gt;\n&lt;\/head&gt;\n<\/pre><\/div>\n\n\n<p>You can read more about import <a href=\"https:\/\/www.html5rocks.com\/en\/tutorials\/webcomponents\/imports\/\">here<\/a> on Eric&#8217;s post.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pillars of HTML Vanilla Web Components<\/p>\n","protected":false},"author":1,"featured_media":6769,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[9],"tags":[114,462,461],"class_list":["post-6726","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-salesforce","tag-html-5","tag-lightning-web-component","tag-web-components"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/02\/Introduction-to-HTML-Web-Components.png?fit=2368%2C1516&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":4102,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-faq-part-20-lightning-questions\/","url_meta":{"origin":6726,"position":0},"title":"Salesforce interview question related to Lightning framework &#8211; Part 20","author":"Jitendra","date":"February 4, 2015","format":false,"excerpt":"Salesforce interview questions for Salesforce developers and admin , mostly related to newly released Salesforce Lightning components and applications","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5885,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-spring-17-release-my-favorite-features\/","url_meta":{"origin":6726,"position":1},"title":"Salesforce Spring 17 release &#8211; My favorite features","author":"Jitendra","date":"January 27, 2017","format":false,"excerpt":"List of my favorite features in Salesforce Spring 17","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Apex Batch job - Spring 17","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/01\/Salesforce-Apex-Batch-job-Spring-17.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/01\/Salesforce-Apex-Batch-job-Spring-17.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/01\/Salesforce-Apex-Batch-job-Spring-17.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/01\/Salesforce-Apex-Batch-job-Spring-17.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":4461,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/getting-started-with-basics-of-lightning-component\/","url_meta":{"origin":6726,"position":2},"title":"Getting started with basics of Lightning Component","author":"Jitendra","date":"May 19, 2015","format":false,"excerpt":"As you might already know\u00a0that next big change in Salesforce is introduction to lightning components. As technology is changing rapidly and to take advantage of cutting edge innovations in web technology, Salesforce doesn't want to stay behind. If we see trend, all major platform has introduced component based design like\u2026","rel":"","context":"In &quot;Lightning&quot;","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Getting started with Lightning component Output","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Getting-started-with-Lightning-component-Output.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":6920,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/data-exchange-between-aura-lightning-web-components-lwc-and-visualforce\/","url_meta":{"origin":6726,"position":3},"title":"Event Handling between Aura, Lightning Web Components (LWC) and Visualforce","author":"Jitendra","date":"October 16, 2019","format":false,"excerpt":"How to use Lightning Message Services for event handling between Lightning Web Components, Aura Components and Visualforce","rel":"","context":"In &quot;Lightning&quot;","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Salesforce Lightning Message Service","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":6880,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/get-current-user-id-in-salesforce\/","url_meta":{"origin":6726,"position":4},"title":"Get Current User Id in Salesforce","author":"Jitendra","date":"February 2, 2019","format":false,"excerpt":"How to get Current Logged in user Id in Apex, Visualforce, Lightning Component and Formula fields in Salesforce","rel":"","context":"In &quot;Lightning&quot;","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4646,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/compliation-of-resources-to-learn-lightning-components-in-salesforce\/","url_meta":{"origin":6726,"position":5},"title":"Compilation of resources to learn Lightning Components in Salesforce","author":"Jitendra","date":"July 8, 2015","format":false,"excerpt":"An attempt to gather all resources to learn Salesforce lightning component in one blog post","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=6726"}],"version-history":[{"count":7,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6726\/revisions"}],"predecessor-version":[{"id":6775,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6726\/revisions\/6775"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media\/6769"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=6726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=6726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=6726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}