{"id":136732,"date":"2018-08-11T08:47:36","date_gmt":"2018-08-11T08:47:36","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=136732"},"modified":"2022-08-04T13:35:55","modified_gmt":"2022-08-04T13:35:55","slug":"how-to-create-web-components","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-create-web-components\/","title":{"rendered":"How To Create Web Components"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to create web components in vanilla JavaScript ?<\/h2>\n\n\n\n<p>In modern&nbsp; &#8220;Coding Standards&#8221;, Code Re-usability ( like, using Web Components ) is something for which developers yearn for, to save time and key-hits and to make the coding style effective. Reusing code here,&nbsp; doesn&#8217;t mean to use the clone and copying\/pasting it multiple times but instead it means using some existing chunk of code in some altered form again and again in your app.<\/p>\n\n\n\n<p>In Web Development, the Web Components are a boon for code re-usability. Each HTML element that we use is kind of a web component native to the web browser. Along with these, you can also create your own custom web components to rationalise your code and the process of building web applications.<\/p>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\">What are Web Components ?<\/h3><\/div><div class=\"margin-bottom-50\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Web Components are a set of&nbsp; Web Platform APIs that lets you create your own custom elements or widgets with their functionality hidden from rest of the code.&nbsp; These custom components or you may say widgets ensures re-usability and interoperability of the code inside the components and creating a functionality encapsulated from the rest of the code.<\/p><\/blockquote>\n<\/div>\n\n\n\n<p>Web Component inhere three main Web APIs to create a custom component and utilize them in your Web Apps :-<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Custom Elements<\/strong> : An API to create a new HTML Tags \/ Elements and define their behavior.<\/li><li><strong>Shadow DOM<\/strong> : It allows you to define an encapsulated shadow DOM tree to an element having functionality separated from the outside DOM. This can have its own style which will not affect the DOM tree.<\/li><li><strong>Templates<\/strong> : In &lt;template&gt; tags, you can write desired markup which will not be rendered in the DOM unless you instantiate them with Javascript allowing you to reuse them as required.<\/li><\/ul>\n\n\n\n<p>If you are unfamiliar about Shadow DOM and Template tags you can always read about them ( <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Web_Components\/Using_shadow_DOM\" rel=\"noopener noreferrer\">Using Shadow DOM<\/a> ) and then continue from here.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<div>&nbsp;<\/div>\n\n\n\n<div>&nbsp;<\/div>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\">Creating a Web Component<\/h3><\/div><div class=\"margin-bottom-50\">\n<p>Alright, so in this article, we will be creating a custom component and learn how you can extend the capabilities of above APIs to create a custom DOM element having its own markup, its own stylesheet and we will try adding Events too to them which will be fully independent of the outside DOM spec.<\/p>\n\n\n\n<p>In simple words, we will create a tag for showing a <strong>notification bar&nbsp; <\/strong>as <strong>&lt;notification-bar&gt;&lt;\/notification-bar&gt; <\/strong>with text which you can set in an attribute &#8220;text&#8221; of this element. So lets get started &#8211;<\/p>\n<\/div>\n\n\n\n<p>Firstly, we&#8217;ll be creating a Template for our Notification Bar defined with its own markup and stylesheet which will be injected to the shadow Dom of the &lt;notification-bar&gt;.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted brush:xml\">    &lt;template id=\"notification-bar-tmpl\"&gt;\n        &lt;div&gt;\n            &lt;p&gt;Hello! I am Mr. Component. Use me anywhere, anytime :)&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;style&gt;\n            div{\n                box-shadow: 0 5px 32px 0 rgba(0,0,0,.15);\n                border-radius: 5px;\n                border-left: solid 5px #2149f3;\n                margin-bottom: 30px;\n                padding: 20px;\n                font-family: sans-serif;\n                position: relative;\n            }\n        &lt;\/style&gt;\n\n    &lt;\/template&gt;\n\n<\/pre>\n\n\n\n<p>So, this is the markup which we&#8217;ll be using for our custom element or you may say &lt;notification&gt; will have this markup. Now, actually moving towards the juice of this element, we need to register a custom element. For this, basic procedure is to create a class using&nbsp;ECMAScript 2015 syntax in which we&#8217;ll create the functionality of &lt;notification-bar&gt; element.<\/p>\n\n\n\n<p><code>CustomElementRegistry.define( '<em>name<\/em>', '<em>constructor<\/em>' )<\/code>&nbsp; &nbsp;:-&nbsp; This will be used to register a custom element, where &#8216;<strong><em>name<\/em><\/strong>&#8216; is the name of the new custom element in which our case is &#8216;<em>notification-bar<\/em>&#8216; and &#8216;<strong><em>constructor<\/em><\/strong>&#8216; is the constructor of the new element. There is one more parameter &#8216;extends&#8217; options, a string of a HTML element from which new custom element extends the properties from.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Types of Custom Elements<\/h2>\n\n\n\n<p>Basically, there are two types of custom elements,<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><em><strong>Customized Built-in elements<\/strong><\/em><strong> :-<\/strong> Those, which inherit properties&nbsp; from default ( or Native ) Elements or extends from. For example, if we specify, &#8216;p&#8217; in &#8216;extends&#8217; parameter, our new custom element will inherit properties of a &lt;p&gt; tag.<\/li><li><em><strong>Autonomous :-&nbsp;<\/strong><\/em> Elements which do not inherit properties from native HTML elements.<\/li><\/ol>\n\n\n\n<p>So, you may infer that we&#8217;ll be creating an Autonomous Custom Element. Pretty right? Lets jump on the syntactic sugar.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted brush:js\">class notiBarConstruct extends HTMLElement{\n\tconstructor(){\n\t\tsuper();\n\n\t\tconst notiBarTemplate = document.getElementById( 'notification-bar-tmpl' );\n\t\tconst notiBarTemplateContent = notiBarTemplate.content;\n\t\tconst notiBarShadowRoot = this.attachShadow( { mode : 'closed' } );\n\t\tnotiBarShadowRoot.appendChild( notiBarTemplateContent.cloneNode( true ) );\n\t}\n};\n\ncustomElements.define( 'notification-bar', notiBarConstruct );\n<\/pre>\n\n\n\n<p>As you can see, here we are taking the markup from our defined template<strong><em> &#8216;notification-bar-tmpl&#8217;&nbsp; <\/em><\/strong>and attaching the markup into our component&#8217;s shadow DOM using <code>this.attachShadow( { mode : 'closed' } )<\/code>&nbsp;, where mode &#8216;<strong>closed&#8217;&nbsp; <\/strong>means that this shadow DOM tree is inaccessible using JavaScript outer DOM scripts and &#8216;<strong>this<\/strong>&#8216; refers to the new &lt;notification-bar&gt; element.<\/p>\n\n\n\n<p>That&#8217;s it, you have created your own Custom Element\/Tag which you can use anywhere in your HTML as <strong>&lt;notification-bar&gt;&lt;\/notification-bar&gt;<\/strong>. Refer the images below :-<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"974\" height=\"322\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download.png\" alt=\"Custom Element\" class=\"wp-image-137981\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download.png 974w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download-250x83.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download-300x99.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download-768x254.png 768w\" sizes=\"(max-width: 974px) 100vw, 974px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p><strong>This markup outputs into :-<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"831\" height=\"342\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download-2.png\" alt=\"Custom Element\/Tag Notification\" class=\"wp-image-137986\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download-2.png 831w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download-2-250x103.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download-2-300x123.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download-2-768x316.png 768w\" sizes=\"(max-width: 831px) 100vw, 831px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<div>&nbsp;<\/div>\n\n\n\n<div>&nbsp;<\/div>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\">Dynamically defining properties<\/h3><\/div><div class=\"margin-bottom-50\">\n<p>Re-using a chunk of code becomes more serviceable and nifty when you can alter the existing process of the code by extending the properties and defining it as per our requirement. Like for an example, we want the message to be passed in the &lt;notification-bar&gt; tag to be defined whenever we call the component.<\/p>\n<\/div>\n\n\n\n<p>So, we&#8217;ll add two attributes namely &#8216;color&#8217; and &#8216;text&#8217;&nbsp; and define the custom values to them. So, our calling of custom element would look like &#8211;<\/p>\n\n\n\n<p><code>&lt;notification-bar color=\"#00d000\" text=\"Viola! its success! \\m\/\"&gt;&lt;\/notification-bar&gt;<\/code><br><code>&lt;notification-bar color=\"#ff6a6a\" text=\"Booo! something's wrong :-(\"&gt;&lt;\/notification-bar&gt;<\/code><\/p>\n\n\n\n<p>We need to update our component snippet to be used to use our passed attributes into the custom element. Nothing fancy here, just using <code>this.getAttribute( 'attribute_name' )<\/code> and we are set. So, the code would look like this-<\/p>\n\n\n\n<pre class=\"wp-block-preformatted brush:js\">class notiBarConstruct extends HTMLElement{\n\tconstructor(){\n\t\tsuper();\n\n\t\tconst notiBarTemplate = document.getElementById( 'notification-bar-tmpl' );\n\t\tconst notiBarTemplateContent = notiBarTemplate.content;\n\t\tconst notiBarShadowRoot = this.attachShadow( { mode : 'closed' } );\n\t\tnotiBarShadowRoot.appendChild( notiBarTemplateContent.cloneNode( true ) );\n\n\t\t\/\/If 'text' is missing, fallback to default text content\n\t\tnotiBarShadowRoot.querySelector( 'p' ).textContent = ( this.getAttribute( 'text' ) ) ? this.getAttribute( 'text' ) : notiBarShadowRoot.querySelector( 'p' ).textContent;\n\t\tnotiBarShadowRoot.querySelector( 'div' ).style.borderColor = this.getAttribute( 'color' );\n\t}\n};\n\ncustomElements.define( 'notification-bar', notiBarConstruct );<\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"847\" height=\"596\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download-3.png\" alt=\"Custom Element\" class=\"wp-image-137990\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download-3.png 847w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download-3-250x176.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download-3-300x211.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download-3-768x540.png 768w\" sizes=\"(max-width: 847px) 100vw, 847px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\">Events in Web Components<\/h3><\/div><div class=\"margin-bottom-50\">\n<p>Adding Event listeners to these custom elements is a piece of cake! By using these techniques, we can create much dense and beautiful components which can be used anywhere, anytime.<\/p>\n\n\n\n<p>For an eg, we can create a slideshow window having buttons to toggle the slides and much more just with a simple custom element. Infer here that, it resembles how a HTML5 &lt;video&gt; is used and options like fullscreen, play and stop buttons are visible, although you don&#8217;t have to define them in your markup or write any script.<\/p>\n<\/div>\n\n\n\n<p>Let&#8217;s just create a simple &#8216;close&#8217; notification button in &lt;notification-bar&gt; element, on which we&#8217;ll be adding a click event listener which will destroy that particular notification bar. For that, update the template, add a close element and attach some style to it.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted brush:xml\">    &lt;template id=\"notification-bar-tmpl\"&gt;\n        &lt;div&gt;\n            &lt;span&gt;X&lt;\/span&gt;\n            &lt;p&gt;Hello! I am Mr. Component. Use me anywhere, anytime :)&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;style&gt;\n            div{\n                box-shadow: 0 5px 32px 0 rgba(0,0,0,.15);\n                border-radius: 5px;\n                border-left: solid 5px #2149f3;\n                margin-bottom: 30px;\n                padding: 20px;\n                font-family: sans-serif;\n                position: relative;\n            }\n            span{\n                position: absolute;\n                font-size: 16px;\n                font-weight: bolder;\n                color: #555;\n                cursor: pointer;\n                right: 10px;\n                top: 10px;\n            }\n            span:hover{\n                color: #333;\n            }\n        &lt;\/style&gt;<\/pre>\n\n\n\n<p>Now, add this code in the constructor of the component which will add a click event to the &lt;span&gt;<\/p>\n\n\n\n<pre class=\"wp-block-preformatted brush:js\">\/\/Click event\nnotiBarShadowRoot.querySelector( 'span' ).addEventListener( 'click', () =&gt; {\n\tthis.parentNode.removeChild( this );\n});<\/pre>\n\n\n\n<p><strong>Note :-&nbsp;<\/strong>In the above snippet, &#8216;<em><strong>this<\/strong><\/em>&#8216; points to the constructor of the component and not the current scope.<\/p>\n\n\n\n<p>Now, we have added a close button to the notification being displayed whenever the &lt;notification-bar&gt; is used. The close button should be working now. The output is shown in the image &#8211;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"856\" height=\"377\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download-4.png\" alt=\"Custom Element\" class=\"wp-image-138018\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download-4.png 856w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download-4-250x110.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download-4-300x132.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download-4-768x338.png 768w\" sizes=\"(max-width: 856px) 100vw, 856px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>You can view the live example of creating and using a web component in the below pen and edit\/try it on freely to understand the flow and working of this Custom Web Component.<\/p>\n\n\n\n<p class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/sachinyadav04\/pen\/ajXWQY\/\" rel=\"noopener noreferrer\">Custom Web Component<\/a> by Sachin Yadav (<a href=\"https:\/\/codepen.io\/sachinyadav04\" rel=\"noopener noreferrer\">@sachinyadav04<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"noopener noreferrer\">CodePen<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>By reading this article and trying a followed small example of a Web Component, you might have realized how much powerful these custom web components are and to what extent these components could be extended to facilitate a perfect code re-usability technique while encapsulating the inner functionality in our Web Apps.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Usage :-<\/h2>\n\n\n\n<p>This convenient approach let us create create slideshows, notifications, pop-ups, animated elements and etc., the components which could be re-used in the Web Apps and just use them as a plain HTML Native Elements. You can even create fully component based modular web app in which data model changes dynamically while view and controller remains static. And that&#8217;s what I call engaging dynamics in Web Apps, in one way.&nbsp; \ud83d\ude42 \ud83d\ude42<\/p>\n\n\n\n<p>Thanks for reading this article, hope it helps.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to create web components in vanilla JavaScript ? In modern&nbsp; &#8220;Coding Standards&#8221;, Code Re-usability ( like, using Web Components ) is something for which developers yearn for, to save time and key-hits and to make the coding style effective. Reusing code here,&nbsp; doesn&#8217;t mean to use the clone and copying\/pasting it multiple times but <a href=\"https:\/\/webkul.com\/blog\/how-to-create-web-components\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":207,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40],"tags":[7269,2831,7270,7268],"class_list":["post-136732","post","type-post","status-publish","format-standard","hentry","category-component","tag-custom-elements","tag-javascript-template","tag-shadow-dom","tag-web-components"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Web Components | Webkul Software<\/title>\n<meta name=\"description\" content=\"How to create custom HTML elements or web components using Web Component APIs in javascript - Custom Element, Shadow DOM and Templates\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-create-web-components\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Components | Webkul Software\" \/>\n<meta property=\"og:description\" content=\"How to create custom HTML elements or web components using Web Component APIs in javascript - Custom Element, Shadow DOM and Templates\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-create-web-components\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-11T08:47:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-04T13:35:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download.png\" \/>\n<meta name=\"author\" content=\"Sachin Yadav\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sachin Yadav\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-web-components\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-web-components\/\"},\"author\":{\"name\":\"Sachin Yadav\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/0529d24db5ef1e4bb8d46313caccd691\"},\"headline\":\"How To Create Web Components\",\"datePublished\":\"2018-08-11T08:47:36+00:00\",\"dateModified\":\"2022-08-04T13:35:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-web-components\/\"},\"wordCount\":1267,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-web-components\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download.png\",\"keywords\":[\"custom elements\",\"javascript template\",\"shadow DOM\",\"Web Components\"],\"articleSection\":[\"component\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-web-components\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-web-components\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-create-web-components\/\",\"name\":\"Web Components | Webkul Software\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-web-components\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-web-components\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download.png\",\"datePublished\":\"2018-08-11T08:47:36+00:00\",\"dateModified\":\"2022-08-04T13:35:55+00:00\",\"description\":\"How to create custom HTML elements or web components using Web Component APIs in javascript - Custom Element, Shadow DOM and Templates\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-web-components\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-web-components\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-web-components\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download.png\",\"width\":\"974\",\"height\":\"322\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-web-components\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Create Web Components\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/0529d24db5ef1e4bb8d46313caccd691\",\"name\":\"Sachin Yadav\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/dd9da94f19302c04d1cfbfa0d9279ffa02be69d1798a0af74c84a4f5c138e35e?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/dd9da94f19302c04d1cfbfa0d9279ffa02be69d1798a0af74c84a4f5c138e35e?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Sachin Yadav\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/sachin-yadav831\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web Components | Webkul Software","description":"How to create custom HTML elements or web components using Web Component APIs in javascript - Custom Element, Shadow DOM and Templates","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/how-to-create-web-components\/","og_locale":"en_US","og_type":"article","og_title":"Web Components | Webkul Software","og_description":"How to create custom HTML elements or web components using Web Component APIs in javascript - Custom Element, Shadow DOM and Templates","og_url":"https:\/\/webkul.com\/blog\/how-to-create-web-components\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2018-08-11T08:47:36+00:00","article_modified_time":"2022-08-04T13:35:55+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download.png","type":"","width":"","height":""}],"author":"Sachin Yadav","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Sachin Yadav","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-create-web-components\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-web-components\/"},"author":{"name":"Sachin Yadav","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/0529d24db5ef1e4bb8d46313caccd691"},"headline":"How To Create Web Components","datePublished":"2018-08-11T08:47:36+00:00","dateModified":"2022-08-04T13:35:55+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-web-components\/"},"wordCount":1267,"commentCount":3,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-web-components\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download.png","keywords":["custom elements","javascript template","shadow DOM","Web Components"],"articleSection":["component"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-create-web-components\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-create-web-components\/","url":"https:\/\/webkul.com\/blog\/how-to-create-web-components\/","name":"Web Components | Webkul Software","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-web-components\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-web-components\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download.png","datePublished":"2018-08-11T08:47:36+00:00","dateModified":"2022-08-04T13:35:55+00:00","description":"How to create custom HTML elements or web components using Web Component APIs in javascript - Custom Element, Shadow DOM and Templates","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-web-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-create-web-components\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-create-web-components\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/08\/download.png","width":"974","height":"322"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-create-web-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Create Web Components"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/0529d24db5ef1e4bb8d46313caccd691","name":"Sachin Yadav","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/dd9da94f19302c04d1cfbfa0d9279ffa02be69d1798a0af74c84a4f5c138e35e?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dd9da94f19302c04d1cfbfa0d9279ffa02be69d1798a0af74c84a4f5c138e35e?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Sachin Yadav"},"url":"https:\/\/webkul.com\/blog\/author\/sachin-yadav831\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/136732","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/207"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=136732"}],"version-history":[{"count":85,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/136732\/revisions"}],"predecessor-version":[{"id":346992,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/136732\/revisions\/346992"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=136732"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=136732"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=136732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}