{"id":52303,"date":"2015-07-27T08:00:32","date_gmt":"2015-07-27T06:00:32","guid":{"rendered":"https:\/\/www.humanlevel.com\/sin-categorizar\/que-son-y-en-que-consisten-los-web-components.html"},"modified":"2023-10-16T14:13:28","modified_gmt":"2023-10-16T12:13:28","slug":"what-are-web-components","status":"publish","type":"post","link":"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components","title":{"rendered":"What are Web Components and what do they consist of?"},"content":{"rendered":"<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Index<\/p><ul class=\"toc_list\"><li><a href=\"#What_they_consist_of\">What they consist of<\/a><\/li><li><a href=\"#What_they_can_be_used_for\">What they can be used for<\/a><\/li><li><a href=\"#How_are_they_used\">How are they used?<\/a><\/li><li><a href=\"#Support_and_frameworks\">Support and frameworks<\/a><\/li><li><a href=\"#Technologies_used\">Technologies used<\/a><\/li><li><a href=\"#Indexability\">Indexability<\/a><\/li><\/ul><\/div>\n<p>If you haven&#8217;t heard of them yet, read on, because the next tag you don&#8217;t recognize in HTML is likely to be a <strong>Web Component<\/strong>since <strong>allow developers to invent labels<\/strong> new HTML, with their own functionalities and allow for the <strong>client code encapsulation<\/strong>This was not possible until now.<\/p>\n<p>&nbsp;<\/p>\n<h2><span id=\"What_they_consist_of\">What they consist of<\/span><\/h2>\n<p>The Web Components specification started to be developed about a couple of years ago, although some of the technologies it uses started earlier. <strong>They represent a revolution in the world of Web development<\/strong> in terms of <strong>client code reuse and encapsulation<\/strong>, since they allow encapsulating HTML, CSS and JavaScript code, so that it cannot be affected by the code of the page that includes it. If we want to modify the style of a Web Component from outside its code, we can do it, but it would have to be on purpose.<br \/>\nThey are easily recognizable because they <strong>must always have a hyphen in the name <\/strong>(see the following example of a Web component that allows you to add Google maps):<br \/>\n<code><br \/>\n&lt;google-map latitude=\"37.77493\" longitude=\"-122.41942\"&gt;&lt;\/google-map&gt;<br \/>\n<\/code><br \/>\nAs you can see, in the Web Component the developer can add as many properties as he wants.<br \/>\n<strong>It is<\/strong> also <strong>possible to extend the functionality of existing elements<\/strong>, for example, the following component extends the functionality of a text field of a form, allowing the validation of the same:<br \/>\n<code><br \/>\n&lt;input is=\"iron-input\" prevent-invaild-input allowed-pattern=\"[0-9]\"&gt;<br \/>\n<\/code><br \/>\n<strong>Web Components that extend native elements are recognizable by the &#8220;is&#8221; attribute<\/strong>, which must have as value the name of the Web Compent with its hyphen.<\/p>\n<p>&nbsp;<\/p>\n<h2><span id=\"What_they_can_be_used_for\">What they can be used for<\/span><\/h2>\n<p>We have already seen that we can use them to<strong> encapsulate the use<\/strong> of external<strong> JavaScript APIs<\/strong> such as Google Maps and to <strong>extend the behavior of native elements<\/strong>.<br \/>\nAnother use is to <strong>add semantic markup or even content<\/strong>, for example, suppose that for the products of an online store we have the following Web component:<br \/>\n<code><\/code><\/p>\n<pre>&lt;producto-tienda precio=\"99\" precioAntes=\"88\" href=\"\/enlace-producto.html\"&gt;\n  &lt;div class=\"nombre\"&gt;Nombre producto&lt;\/div&gt;\n  &lt;div class=\"descripcion\"&gt;Descripci\u00f3n producto&lt;\/divglt;\n&lt;\/producto-tienda&gt;\n<\/pre>\n<p>This Web component could generate the following code in the user&#8217;s browser, for each product that we add in this way:<br \/>\n<code><\/code><\/p>\n<pre>&lt;article itemscope=\"\" itemtype=\"http:\/\/schema.org\/Product\"&gt;\n\t&lt;h3&gt;&lt;a itemprop=\"url\" href=\"\/enlace-producto.html\"&gt;&lt;span itemprop=\"name\"&gt;Nombre producto&lt;\/span&gt;&lt;\/a&gt;&lt;\/h3&gt;\n\t&lt;p itemprop=\"description\"&gt;Descripci\u00f3n producto&lt;\/p&gt;\n\t&lt;p itemprop=\"offers\" itemscope=\"\" itemtype=\"http:\/\/schema.org\/Offer\"&gt;\n\t\t&lt;del&gt;Antes 88\u20ac&lt;\/del&gt;&lt;ins&gt;Ahora &lt;span itemprop=\"price\"&gt;99&lt;\/span&gt; \u20ac&lt;\/ins&gt;\n\t&lt;\/p&gt;\n&lt;\/article&gt;\n<\/pre>\n<p>Even with a single product, you can see that the Web Component saves us a lot of HTML, since less code is repeated and it also adds the microdata necessary for Google to recognize it as a product.<br \/>\n<strong>The most common application is to facilitate the use of JavaScript libraries<\/strong> to make tabs, slides, carousels, responsive images or any other type of functionality that requires using a certain HTML format in conjunction with a JavaScript library and CSS code.<\/p>\n<p>&nbsp;<\/p>\n<h2><span id=\"How_are_they_used\">How are they used?<\/span><\/h2>\n<p>In order to start using a Web Component, we only have to <strong>import it from the header or head tag<\/strong> of the page that is going to use it by means of the following tag:<br \/>\n<code><br \/>\n&lt;link rel=\"import\" href=\"ejemplo-componente.html\"&gt;<br \/>\n<\/code><br \/>\nWithin that HTML we will have all the HTML, JavaScript and CSS code necessary for its operation.<\/p>\n<p>&nbsp;<\/p>\n<h2><span id=\"Support_and_frameworks\">Support and frameworks<\/span><\/h2>\n<p>Currently, not all browsers support all the necessary technologies to make them work, however, <strong>there are three frameworks<\/strong> that, through polyfills, make them <strong>interoperable between all browsers<\/strong>, while facilitating their development. These frameworks are:<\/p>\n<ul>\n<li><strong>Polymer<\/strong>: Developed by Google, they have recently released version 1.0. They are already using this framework to develop their services. In IE it works from version 11 onwards as it focuses on supporting the latest browsers to give maximum performance.<\/li>\n<li><strong>X-Tag<\/strong>: Developed by Mozilla. In IE it works from version 9 onwards.<\/li>\n<li><strong>Bosonic<\/strong>: Like the previous one, it also supports older versions of browsers, specifically in IE it also works from version 9 onwards.<\/li>\n<\/ul>\n<h2><\/h2>\n<h2><span id=\"Technologies_used\">Technologies used<\/span><\/h2>\n<p>Web components is not a technology by itself, it is <strong>based on the combined use of four technologies that can be used independently<\/strong> and that I detail below:<\/p>\n<ul>\n<li><strong>Custom Elements<\/strong>: allows you to define new types of elements.<\/li>\n<li><strong>HTML Imports<\/strong>: allows you to import HTML files inside another HTML file for reuse using the link tag we have seen before.<\/li>\n<li><strong>Templates<\/strong>: Templates allow you to create HTML snippets that can be replicated as many times as necessary.<\/li>\n<li><strong>Shadow DOM<\/strong>: this specification is the most important and difficult to understand. It is the technology that allows us to encapsulate pieces of HTML, isolating CSS and JavaScript code so that it is not affected by the code of the page. Such a DOM tree is said to be hidden in the shadows<strong>(shady DOM<\/strong>), within a document that has the DOM in the light<strong>(light DOM<\/strong>). The browser will generate the light DOM mixed with pieces of shady DOM, in the form that we have defined. This is done by establishing a correspondence between the <strong>shadow host<\/strong> (element of the document tree in the light that is to contain the shadow tree) and the <strong>shadow root<\/strong> (root element of the shadow tree), within the tree in the shadows you set where each element of the tree should appear in the light with the special tag &#8220;content&#8221;. The DOM generated by the browser, where the light and shadow DOM are mixed, is called <strong>composed DOM<\/strong> or <strong>rendered DOM<\/strong>. Probably with this brief explanation it is not clear to you how the composition is produced, so if you are interested, I recommend you to take a look at the following W3C graphic and this interactive example:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-19936\" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/shadow-com-composition.png\" alt=\"Composition shadow dom\" width=\"800\" height=\"396\" srcset=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/shadow-com-composition.png 800w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/shadow-com-composition-720x356.png 720w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/shadow-com-composition-768x380.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-19937\" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/shadow-dom-render.png\" alt=\"Composition shadow dom\" width=\"581\" height=\"510\"><\/li>\n<\/ul>\n<p>So to create a Web component the <strong>Shadow Dom<\/strong> is inserted inside a <strong>Template<\/strong> of a <strong>Custom Element<\/strong> that is <strong>imported<\/strong> in a page. A task that is not easy at all, if you do not use the frameworks I mentioned in the previous point, due to the implementation differences in each browser.<\/p>\n<h2><\/h2>\n<h2><span id=\"Indexability\">Indexability<\/span><\/h2>\n<p>Web Components need to <strong>run JavaScript<\/strong> for almost all the technologies they use, but <strong>Google is apparently improving indexing by running JavaScript<\/strong>, allowing Web Components to be indexed. Although, as with any new technology, it is always possible that we may encounter some problems, have any of you already experimented with them?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>IndexWhat they consist ofWhat they can be used forHow are they used?Support and frameworksTechnologies usedIndexability If you haven&#8217;t heard of them yet, read on, because the next tag you don&#8217;t recognize in HTML is likely to be a Web Componentsince allow developers to invent labels new HTML, with their own functionalities and allow for the [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":45441,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[342],"tags":[366],"class_list":["post-52303","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-technical-seo","entry"],"yoast_head":"\n<title>What are Web Components and what do they consist of?<\/title>\n<meta name=\"description\" content=\"If you haven&#039;t heard of them yet, read on, because the next tag you don&#039;t recognize in HTML is probably a Web Component.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What are Web Components and what do they consist of?\" \/>\n<meta property=\"og:description\" content=\"If you haven&#039;t heard of them yet, read on, because the next tag you don&#039;t recognize in HTML is probably a Web Component.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components\" \/>\n<meta property=\"og:site_name\" content=\"Human Level\" \/>\n<meta property=\"article:published_time\" content=\"2015-07-27T06:00:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-16T12:13:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/web-components.png\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ram\u00f3n Saquete\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Daiatron\" \/>\n<meta name=\"twitter:site\" content=\"@humanlevel\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ram\u00f3n Saquete\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components\"},\"author\":{\"name\":\"Ram\u00f3n Saquete\",\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/person\/11ad888926867985985a0210476bae94\"},\"headline\":\"What are Web Components and what do they consist of?\",\"datePublished\":\"2015-07-27T06:00:32+00:00\",\"dateModified\":\"2023-10-16T12:13:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components\"},\"wordCount\":982,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.humanlevel.com\/en#organization\"},\"image\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/web-components.png\",\"keywords\":[\"Technical SEO\"],\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components\",\"url\":\"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components\",\"name\":\"What are Web Components and what do they consist of?\",\"isPartOf\":{\"@id\":\"https:\/\/www.humanlevel.com\/en#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/web-components.png\",\"datePublished\":\"2015-07-27T06:00:32+00:00\",\"dateModified\":\"2023-10-16T12:13:28+00:00\",\"description\":\"If you haven't heard of them yet, read on, because the next tag you don't recognize in HTML is probably a Web Component.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components#primaryimage\",\"url\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/web-components.png\",\"contentUrl\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/web-components.png\",\"width\":500,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.humanlevel.com\/en\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What are Web Components and what do they consist of?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.humanlevel.com\/en#website\",\"url\":\"https:\/\/www.humanlevel.com\/en\",\"name\":\"Human Level\",\"description\":\"Web positioning and online marketing consultant Human Level\",\"publisher\":{\"@id\":\"https:\/\/www.humanlevel.com\/en#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.humanlevel.com\/en?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.humanlevel.com\/en#organization\",\"name\":\"Human Level\",\"url\":\"https:\/\/www.humanlevel.com\/en\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/logo-human-negro-1.jpg\",\"contentUrl\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/logo-human-negro-1.jpg\",\"width\":268,\"height\":51,\"caption\":\"Human Level\"},\"image\":{\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/humanlevel\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/person\/11ad888926867985985a0210476bae94\",\"name\":\"Ram\u00f3n Saquete\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7a50f1a1974393853ee4f2423c9009f813cb107d3e7e20cf17cf8e86d407132e?s=96&d=simple_local_avatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7a50f1a1974393853ee4f2423c9009f813cb107d3e7e20cf17cf8e86d407132e?s=96&d=simple_local_avatar&r=g\",\"caption\":\"Ram\u00f3n Saquete\"},\"description\":\"Desarrollador web y consultor SEO t\u00e9cnico en Human Level. Graduado en Ingenier\u00eda Inform\u00e1tica e Ingenier\u00eda T\u00e9cnica en Inform\u00e1tica de Sistemas. Tambi\u00e9n es T\u00e9cnico Superior en Desarrollo de Aplicaciones Inform\u00e1ticas y posteriormente obtuvo la Certificaci\u00f3n de Aptitud Pedag\u00f3gica. Experto en WPO e indexabilidad.\",\"sameAs\":[\"https:\/\/x.com\/Daiatron\"],\"url\":\"https:\/\/www.humanlevel.com\/en\/author\/ramon\"}]}<\/script>\n","yoast_head_json":{"title":"What are Web Components and what do they consist of?","description":"If you haven't heard of them yet, read on, because the next tag you don't recognize in HTML is probably a Web Component.","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:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components","og_locale":"en_US","og_type":"article","og_title":"What are Web Components and what do they consist of?","og_description":"If you haven't heard of them yet, read on, because the next tag you don't recognize in HTML is probably a Web Component.","og_url":"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components","og_site_name":"Human Level","article_published_time":"2015-07-27T06:00:32+00:00","article_modified_time":"2023-10-16T12:13:28+00:00","og_image":[{"width":500,"height":500,"url":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/web-components.png","type":"image\/png"}],"author":"Ram\u00f3n Saquete","twitter_card":"summary_large_image","twitter_creator":"@Daiatron","twitter_site":"@humanlevel","twitter_misc":{"Written by":"Ram\u00f3n Saquete","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components#article","isPartOf":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components"},"author":{"name":"Ram\u00f3n Saquete","@id":"https:\/\/www.humanlevel.com\/en#\/schema\/person\/11ad888926867985985a0210476bae94"},"headline":"What are Web Components and what do they consist of?","datePublished":"2015-07-27T06:00:32+00:00","dateModified":"2023-10-16T12:13:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components"},"wordCount":982,"commentCount":0,"publisher":{"@id":"https:\/\/www.humanlevel.com\/en#organization"},"image":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components#primaryimage"},"thumbnailUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/web-components.png","keywords":["Technical SEO"],"articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components","url":"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components","name":"What are Web Components and what do they consist of?","isPartOf":{"@id":"https:\/\/www.humanlevel.com\/en#website"},"primaryImageOfPage":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components#primaryimage"},"image":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components#primaryimage"},"thumbnailUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/web-components.png","datePublished":"2015-07-27T06:00:32+00:00","dateModified":"2023-10-16T12:13:28+00:00","description":"If you haven't heard of them yet, read on, because the next tag you don't recognize in HTML is probably a Web Component.","breadcrumb":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components#primaryimage","url":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/web-components.png","contentUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/web-components.png","width":500,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/www.humanlevel.com\/en\/blog\/web-development\/what-are-web-components#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.humanlevel.com\/en"},{"@type":"ListItem","position":2,"name":"What are Web Components and what do they consist of?"}]},{"@type":"WebSite","@id":"https:\/\/www.humanlevel.com\/en#website","url":"https:\/\/www.humanlevel.com\/en","name":"Human Level","description":"Web positioning and online marketing consultant Human Level","publisher":{"@id":"https:\/\/www.humanlevel.com\/en#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.humanlevel.com\/en?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.humanlevel.com\/en#organization","name":"Human Level","url":"https:\/\/www.humanlevel.com\/en","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.humanlevel.com\/en#\/schema\/logo\/image\/","url":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/logo-human-negro-1.jpg","contentUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/logo-human-negro-1.jpg","width":268,"height":51,"caption":"Human Level"},"image":{"@id":"https:\/\/www.humanlevel.com\/en#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/humanlevel"]},{"@type":"Person","@id":"https:\/\/www.humanlevel.com\/en#\/schema\/person\/11ad888926867985985a0210476bae94","name":"Ram\u00f3n Saquete","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.humanlevel.com\/en#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7a50f1a1974393853ee4f2423c9009f813cb107d3e7e20cf17cf8e86d407132e?s=96&d=simple_local_avatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7a50f1a1974393853ee4f2423c9009f813cb107d3e7e20cf17cf8e86d407132e?s=96&d=simple_local_avatar&r=g","caption":"Ram\u00f3n Saquete"},"description":"Desarrollador web y consultor SEO t\u00e9cnico en Human Level. Graduado en Ingenier\u00eda Inform\u00e1tica e Ingenier\u00eda T\u00e9cnica en Inform\u00e1tica de Sistemas. Tambi\u00e9n es T\u00e9cnico Superior en Desarrollo de Aplicaciones Inform\u00e1ticas y posteriormente obtuvo la Certificaci\u00f3n de Aptitud Pedag\u00f3gica. Experto en WPO e indexabilidad.","sameAs":["https:\/\/x.com\/Daiatron"],"url":"https:\/\/www.humanlevel.com\/en\/author\/ramon"}]}},"_links":{"self":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts\/52303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/comments?post=52303"}],"version-history":[{"count":1,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts\/52303\/revisions"}],"predecessor-version":[{"id":52791,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts\/52303\/revisions\/52791"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/media\/45441"}],"wp:attachment":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/media?parent=52303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/categories?post=52303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/tags?post=52303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}