{"id":5335,"date":"2024-12-01T08:47:32","date_gmt":"2024-12-01T07:47:32","guid":{"rendered":"https:\/\/rock-the-prototype.com\/uncategorized\/web-components\/"},"modified":"2024-12-01T09:17:03","modified_gmt":"2024-12-01T08:17:03","slug":"web-components","status":"publish","type":"encyclopedia","link":"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/","title":{"rendered":"Web Components"},"content":{"rendered":"<p><\/p><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\"><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1144px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-1\"><h2><\/h2>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhaltsverzeichnis<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#What_are_Web_Components\" >What are Web Components?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#Why_do_I_need_Web_Components\" >Why do I need Web Components?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#Advantages_of_Web_Components\" >Advantages of Web Components<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#What_is_new_about_the_Web_Component_concept\" >What is new about the Web Component concept?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#How_do_Web_Components_work\" >How do Web Components work?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#1_user-defined_elements\" >1. user-defined elements:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#2_shadow_DOM_shadow_DOM\" >2. shadow DOM \/ shadow DOM:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#3_HTML_templates\" >3. HTML templates:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#How_to_implement_your_Web_Components_step_by_step\" >How to implement your Web Components step by step:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#Challenges_in_traditional_front-end_development\" >Challenges in traditional front-end development<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#Application_areas_of_Web_Components\" >Application areas of Web Components<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#Design_systems_and_UI_libraries\" >Design systems and UI libraries<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#Micro_front-end_architectures\" >Micro front-end architectures<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#E-commerce_platforms\" >E-commerce platforms<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#Interactive_data_visualizations\" >Interactive data visualizations<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#Content_management_systems_CMS\" >Content management systems (CMS)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#Advantages_of_working_with_modern_frameworks\" >Advantages of working with modern frameworks<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#Best_practices_for_web_components\" >Best practices for web components<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#Advanced_features_and_what_you_should_already_know\" >Advanced features and what you should already know<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_are_Web_Components\"><\/span>What are Web Components?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong><a href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/\" target=\"_blank\" title=\"Web Components are a set of different web technologies that allow you as a web developer to create reusable custom elements whose functionality is encapsulated from the rest of the code.\" class=\"encyclopedia\">Web Components<\/a><\/strong> are a set of different <strong>web technologies<\/strong> that allow you as a web developer to create reusable custom elements whose functionality is encapsulated from the rest of the code.<\/p>\n\n<h2><span class=\"ez-toc-section\" id=\"Why_do_I_need_Web_Components\"><\/span>Why do I need Web Components?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>As <strong>web<\/strong> and <strong>software developers<\/strong>, we know that it&rsquo;s always a good idea to reuse good <strong>code<\/strong> as often as possible. Exactly to this <strong>goal of reusability<\/strong> you can use <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Web_Components\" target=\"_blank\" rel=\"noopener\"><strong>web components<\/strong><\/a> use! You can now use these web components in your web applications at any time.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Advantages_of_Web_Components\"><\/span>Advantages of Web Components<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>High degree of reusability<\/li>\n<li>Increase interoperability between different applications<\/li>\n<li>Avoid undesirable side effects<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"What_is_new_about_the_Web_Component_concept\"><\/span>What is new about the Web Component concept?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>With custom <strong>markup structures<\/strong>, the reusability of existing code elements has traditionally not been so easy. Think of the complex HTML and all the different styles and scripts associated with this markup structure of HTML.<\/p>\n<ul>\n<li>How many times in the past have you had to rewrite HTML code to render custom UI controls?<\/li>\n<li>How often have you reached your limits as a front-end developer with this method?<\/li>\n<li>Has the multiple use of controls on the web given you a major headache as a developer?<\/li>\n<li>Have you and \/ or other agile teams had chaos on your or other websites when controls were used multiple times, when you were not extremely careful to avoid all unwanted side effects?<\/li>\n<\/ul>\n<\/div><a class=\"fusion-modal-text-link\" data-toggle=\"modal\" data-target=\".fusion-modal.Spotify Podcast - Episode 6 - WebApp Prototyping with Nuxt.js &amp; Vue.js - Rock the Prototype - Software development &amp; prototyping \" href=\"#\"><iframe class=\"lazyload\" style=\"border-radius: 12px;\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27100%27%20height%3D%27352%27%20viewBox%3D%270%200%20100%20352%27%3E%3Crect%20width%3D%27100%27%20height%3D%27352%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/open.spotify.com\/embed\/episode\/3fSJTN40esBPeYWKNj9vKr?utm_source=generator\" width=\"100%\" height=\"352\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/a>\n<div class=\"fusion-text fusion-text-2\"><h2><span class=\"ez-toc-section\" id=\"How_do_Web_Components_work\"><\/span>How do Web Components work?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The <strong>Web Components strategy<\/strong> aims to solve such problems. Web Components consist of three core technologies. These three web technologies can be used together to create versatile user-defined elements with <strong>encapsulated functionality<\/strong>. A Web Component can then be reused anywhere at any time without unwanted side effects. Code collisions are therefore a thing of the past with the Web Component.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_user-defined_elements\"><\/span>1. user-defined elements:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A series of <strong>JavaScript APIs<\/strong> allows you to define custom elements and their behavior so that you can then use these web elements in your user interface as you wish.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_shadow_DOM_shadow_DOM\"><\/span>2. shadow DOM \/ shadow DOM:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A set of JavaScript APIs for <strong>attaching an encapsulated &ldquo;shadow&rdquo; DOM tree<\/strong> to an element &ndash; which is <strong>rendered separately from the main DOM of the document<\/strong> &ndash; and controlling the associated functions. This allows you to keep properties of an element encapsulated so that you can script and style these elements without fear of collisions with other parts of the document.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_HTML_templates\"><\/span>3. HTML templates:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>You can use the and <strong>elements <\/strong> to write <strong>markup templates<\/strong> that are not displayed on the rendered website. These extremely useful markup templates can then be reused several times as the basis for the structure of a user-defined element.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_implement_your_Web_Components_step_by_step\"><\/span>How to implement your Web Components step by step:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The basic approach to implementing a web component generally works best as follows:<\/p>\n<ol>\n<li>You create a class in which you specify the functionality of your web component by using the <strong>ECMAScript 2015 class syntax<\/strong>.<\/li>\n<li>Register your new custom element with the <em>CustomElementRegistry.define()<\/em> method by passing the element name to be defined, the class or function in which its functionality is defined, and optionally the element from which it inherits.<\/li>\n<li>If necessary, add a DOM shadow to the user-defined element using the <strong>Element.attachShadow()<\/strong> method.<\/li>\n<li>Add child elements, event listeners etc. to the shadow DOM by using regular DOM methods.<\/li>\n<li>If required, define an HTML template with and .<\/li>\n<li>Again, use regular DOM methods to clone the template and attach the template to its shadow DOM.<\/li>\n<li>Use your custom element anywhere on your website, just like any other regular HTML element.<\/li>\n<\/ol>\n<p>Web components are not just for <a href=\"https:\/\/rock-the-prototype.com\/wiki\/web-app\/\"><strong>Web APP development<\/strong><\/a> useful. A web component usually does not work without a web <a href=\"https:\/\/rock-the-prototype.com\/en\/programming-languages-frameworks\/framework\/\" target=\"_blank\" title=\"A framework is a set of guidelines or rules that provides a structure for the organization and development of code in a particular programming language or platform. The framework serves as a basis or blueprint on which to build when developing software applications.\" class=\"encyclopedia\">framework<\/a> or <a href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/library\/\" target=\"_blank\" title=\"A library refers to a software library as a ready-made collection of code that can be used to perform general software development tasks. Libraries are essentially a collection of functions and procedures that can be called up by other software programs to execute certain functions.\" class=\"encyclopedia\">library<\/a>. You can also find cross-platform templates, ideas and code snippets for web components <a href=\"https:\/\/www.webcomponents.org\/\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<\/div><a class=\"fusion-modal-text-link\" data-toggle=\"modal\" data-target=\".fusion-modal.Apple Podcast - Episode 6 - WebApp Prototyping with Nuxt.js &amp; Vue.js - Rock the Prototype - Software development &amp; prototyping \" href=\"#\"><iframe style=\"width: 100%; max-width: 660px; overflow: hidden; border-radius: 10px;\" src=\"https:\/\/embed.podcasts.apple.com\/us\/podcast\/episode-6-webapp-prototyping-with-nuxt-js-vue-js\/id1684835330?i=1000624145271\" height=\"175\" frameborder=\"0\" sandbox=\"allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation\"><\/iframe><\/a>\n<div class=\"fusion-text fusion-text-3\" style=\"--awb-margin-top:4%;\"><h2><span class=\"ez-toc-section\" id=\"Challenges_in_traditional_front-end_development\"><\/span><strong>Challenges in traditional front-end development<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Traditional front-end development has often struggled with code duplication, difficult maintainability and a lack of interoperability. Especially in large projects or teams, conflicts can quickly escalate due to global CSS style or overlapping JavaScript functions.<strong> Web Components<\/strong> address these challenges through a clearly defined structure and strong encapsulation.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Application_areas_of_Web_Components\"><\/span><strong>Application areas of Web Components<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Maximum flexibility for your web development: From design systems to interactive dashboards &ndash; Web Components are revolutionizing how applications are designed and extended. Discover where they really shine!<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Design_systems_and_UI_libraries\"><\/span><strong>Design systems and UI libraries<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Web components are ideal for creating reusable UI components such as buttons, modals or complex forms. They offer a consistent user experience across different projects and teams.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Micro_front-end_architectures\"><\/span><strong>Micro front-end architectures<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In distributed teams or projects that use multiple technologies, web components enable the seamless integration of UI elements, regardless of the framework technology used (e.g. React, Angular, Vue).<\/p>\n<h3><span class=\"ez-toc-section\" id=\"E-commerce_platforms\"><\/span><strong>E-commerce platforms<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Reusable modules such as product displays, shopping carts or checkout processes can be realized efficiently with Web Components.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Interactive_data_visualizations\"><\/span><strong>Interactive data visualizations<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Web Components are a great choice for implementing interactive diagrams or dashboards, as they can be embedded independently and easily in different projects.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Content_management_systems_CMS\"><\/span><strong>Content management systems (CMS)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Create widgets or editors that are flexible and easily customizable without affecting the entire system.<\/p>\n<\/div><div class=\"fusion-video fusion-youtube\" style=\"--awb-max-width:1080px;--awb-max-height:608px;--awb-align-self:center;--awb-width:100%;\"><div class=\"video-shortcode\"><priv-fac-lite-youtube class=\"fusion-hidden lty-load\" data-privacy-type=\"youtube\" videoid=\"IEnIpI5plKs\" params=\"wmode=transparent&amp;autoplay=1&amp;enablejsapi=1\" title=\"YouTube video player 1\" data-button-label=\"Play Video\" width=\"1080\" height=\"608\" data-thumbnail-size=\"auto\" data-no-cookie=\"on\"><\/priv-fac-lite-youtube><div class=\"fusion-privacy-placeholder\" style=\"width:1080px; height:608px;\" data-privacy-type=\"youtube\"><div class=\"fusion-privacy-placeholder-content\"><div class=\"fusion-privacy-label\">For privacy reasons YouTube needs your permission to be loaded. For more details, please see our <a class=\"privacy-policy-link\" href=\"https:\/\/rock-the-prototype.com\/datenschutzerklaerung\/\" rel=\"privacy-policy\">Datenschutzerkl&auml;rung<\/a>.<\/div><button data-privacy-type=\"youtube\" class=\"fusion-button button-default fusion-button-default-size button fusion-privacy-consent\">I Accept<\/button><\/div><\/div><\/div><\/div>\n<div class=\"fusion-text fusion-text-4\"><h2><span class=\"ez-toc-section\" id=\"Advantages_of_working_with_modern_frameworks\"><\/span><strong>Advantages of working with modern frameworks<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Web components can be easily integrated into existing frameworks. They act as &ldquo;framework-agnostic&rdquo; building blocks and thus allow:<\/p>\n<ul>\n<li>Use within React, Angular or Vue projects.<\/li>\n<li>Sharing components between projects, regardless of the framework decision.<\/li>\n<li>The reduction of dependencies through native web technologies.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Best_practices_for_web_components\"><\/span><strong>Best practices for web components<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>Naming custom elements<\/strong><br>\nAlways use a &ldquo;-&rdquo; (hyphen) in the name (e.g. <code>&lt;custom-button&gt;<\/code>) to avoid name collisions with native HTML elements.<\/li>\n<li><strong>Avoid global dependencies<\/strong><br>\nMake sure that your web components do not rely on global <a href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/variables\/\" target=\"_blank\" title=\"Variables are data values that software developers use when values can change in the course of a computer program.\" class=\"encyclopedia\">variables<\/a> or CSS styles.<\/li>\n<li><strong>Encapsulation<\/strong><br>\nUse the shadow DOM consistently to ensure that styles and functions do not conflict with other elements.<\/li>\n<li><strong>Accessibility<\/strong><br>\nImplement ARIA attributes and make sure that your web components are accessible to all users.<\/li>\n<\/ul>\n<\/div><a class=\"fusion-modal-text-link\" data-toggle=\"modal\" data-target=\".fusion-modal.Spotify - Episode 9 - The invisible force behind modern web applications: Why JavaScript engines are so powerful\" href=\"#\"><iframe class=\"lazyload\" style=\"border-radius: 12px;\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27100%27%20height%3D%27352%27%20viewBox%3D%270%200%20100%20352%27%3E%3Crect%20width%3D%27100%27%20height%3D%27352%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/open.spotify.com\/embed\/episode\/0kCkWqDG4YpeqKnXKc1qmy?utm_source=generator\" width=\"100%\" height=\"352\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/a>\n<div class=\"fusion-text fusion-text-5\"><h3><span class=\"ez-toc-section\" id=\"Advanced_features_and_what_you_should_already_know\"><\/span><strong>Advanced features and what you should already know <\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>It pays to know early on how advanced features such as Declarative Shadow DOM, Server-Side Rendering and Progressive Enhancement revolutionize the use of Web Components and significantly expand their application possibilities.<\/p>\n<ol>\n<li><strong>Declarative Shadow DOM<\/strong><br>\nThis new function simplifies the creation and use of Shadow DOM elements by introducing declarative approaches.<\/li>\n<li><strong>Server-Side Rendering (SSR)<\/strong><br>\nAlthough web components are primarily client-side, there are approaches to rendering them on the server side and thus increasing performance.<\/li>\n<li><strong>Progressive enhancement<\/strong><br>\nWeb components can be used as a fallback for modern frameworks if browser support or performance play a role.<\/li>\n<\/ol>\n<p>With these extended features, you not only use Web Components efficiently, but also raise your web applications to a new level in terms of performance and flexibility.<\/p>\n<\/div><a class=\"fusion-modal-text-link\" data-toggle=\"modal\" data-target=\".fusion-modal.itunes - Episode 9 - The invisible force behind modern web applications: Why JavaScript engines are so powerful\" href=\"#\"><iframe style=\"width: 100%; max-width: 660px; overflow: hidden; border-radius: 10px;\" src=\"https:\/\/embed.podcasts.apple.com\/us\/podcast\/episode-9-the-invisible-force-behind-modern-web\/id1684835330?i=1000630428175\" height=\"175\" frameborder=\"0\" sandbox=\"allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation\"><\/iframe><\/a>\n<div class=\"fusion-text fusion-text-6\"><h3>Rock the Prototype Podcast<\/h3>\n<p>The <strong>Rock the Prototype Podcast<\/strong> and the <strong>Rock the Prototype YouTube channel<\/strong> are the perfect place to go if you want to delve deeper into the world of web development, <a href=\"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/prototyping\/\" target=\"_blank\" title=\"What is prototyping? Prototyping is both a process and a strategy for realizing ideas as quickly as possible.\" class=\"encyclopedia\">prototyping<\/a> and technology.<\/p>\n<p class=\"p1\"><strong>&#127911; Listen on Spotify: &#128073; Spotify Podcast: <a href=\"https:\/\/bit.ly\/41pm8rL\">https:\/\/bit.ly\/41pm8rL<\/a><\/strong><\/p>\n<p class=\"p1\"><strong><span class=\"s1\">&#127822;<\/span> Enjoy on Apple Podcasts: <span class=\"s1\">&#128073;<\/span>&nbsp;<a href=\"https:\/\/bit.ly\/4aiQf8t\">https:\/\/bit.ly\/4aiQf8t<\/a><\/strong><\/p>\n<p>In the podcast, you can expect exciting discussions and valuable insights into current trends, tools and best practices &ndash; ideal for staying on the ball and gaining fresh perspectives for your own projects. On the YouTube channel, you&rsquo;ll find practical tutorials and step-by-step instructions that clearly explain technical concepts and help you get straight into implementation.<\/p>\n<p><strong>Rock the Prototype YouTube Channel<\/strong><\/p>\n<p>&#128640; Rock the Prototype is &#128073; Your format for exciting topics such as software development, prototyping, software architecture, <a href=\"https:\/\/rock-the-prototype.com\/en\/cloud-computing-cloud-technology\/cloud\/\" target=\"_blank\" title=\"What is cloud? Cloud or cloud computing moves data and programs from desktop PCs or servers in a company to remote cloud servers. Cloud storage therefore consists of a standard server network in a cloud data center or distributed across several cloud server locations.\" class=\"encyclopedia\">cloud<\/a>, DevOps &amp; much more.<\/p>\n<p>&#128250; &#128075;&nbsp;<strong><a href=\"https:\/\/www.youtube.com\/@Rock-the-Prototype\" target=\"_blank\" rel=\"noopener\">Rock the Prototype YouTube Channel<\/a>&nbsp;&#128072;&nbsp; &#128064;&nbsp;<\/strong><\/p>\n<p style=\"padding-left: 40px;\">&#9989; Software development &amp; prototyping<\/p>\n<p style=\"padding-left: 40px;\">&#9989; Learning to program<\/p>\n<p style=\"padding-left: 40px;\">&#9989; Understanding software architecture<\/p>\n<p style=\"padding-left: 40px;\">&#9989; Agile teamwork<\/p>\n<p style=\"padding-left: 40px;\">&#9989; Test prototypes together<\/p>\n<p><strong>THINK PROTOTYPING &ndash; PROTOTYPE DESIGN &ndash; PROGRAM &amp; GET STARTED &ndash; JOIN IN NOW!<\/strong><\/p>\n<h4>Why is it worth checking back regularly?<\/h4>\n<p>Both formats complement each other perfectly: in the podcast, you can learn new things in a relaxed way and get inspiring food for thought, while on YouTube you can see what you have learned directly in action and receive valuable tips for practical application.<\/p>\n<p>Whether you&rsquo;re just starting out in software development or are passionate about prototyping, UX design or IT security. We offer you new technology trends that are really relevant &ndash; and with the Rock the Prototype format, you&rsquo;ll always find relevant content to expand your knowledge and take your skills to the next level!<\/p>\n<\/div>\n<\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-2 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\"><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1144px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-1 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><a class=\"fusion-modal-text-link\" data-toggle=\"modal\" data-target=\".fusion-modal.Rock the Prototype - Software development &amp; Prototyping Podcast iTunes\" href=\"#\"><iframe id=\"embedPlayer\" style=\"width: 100%; max-width: 660px; overflow: hidden; border-radius: 10px; transform: translateZ(0px); animation: 2s ease 0s 6 normal none running loading-indicator; background-color: #e4e4e4;\" src=\"https:\/\/embed.podcasts.apple.com\/us\/podcast\/rock-the-prototype-software-development-prototyping\/id1684835330?itsct=podcast_box_player&amp;itscg=30200&amp;ls=1&amp;theme=auto\" height=\"450px\" frameborder=\"0\" sandbox=\"allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation\"><\/iframe><\/a><\/div><\/div><\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Web Components are a set of different web technologies that allow you as a web developer to create reusable custom elements whose functionality is encapsulated from the rest of the code.<\/p>\n","protected":false},"author":1,"featured_media":3370,"template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[1258,1166],"tags":[1171,1172,1144,3557,3556,3551,3545,1169,3552,3553,3332,3333,3400,1731,1943,1464,1174,1142,3546,3403,3549,3554,1147,1146,1148,2450,1173,1262,3550,1370,1371,1384,1287,1288],"class_list":["post-5335","encyclopedia","type-encyclopedia","status-publish","has-post-thumbnail","hentry","category-learn-programming","category-software-architecture","tag-app-en","tag-apps-en","tag-design-pattern-en","tag-ecma-en","tag-ecmascript-en","tag-encapsulated-functionality","tag-high-reusability","tag-javascript-en","tag-javascript-api-en","tag-javascript-apis-en","tag-javascript-libraries","tag-javascript-library","tag-microservice-design-en","tag-microservice-programming","tag-microservices-en","tag-object-orientation","tag-program-microservice","tag-programming","tag-progressive-web-app-en","tag-progressive-web-design","tag-reusability","tag-shadow-dom-en","tag-software-architecture","tag-software-design-en","tag-software-development","tag-w3c-en","tag-web-app-en","tag-web-apps-en","tag-web-component-en","tag-web-technologies","tag-web-technology","tag-webbrowser-en","tag-website-en","tag-websites-en"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Web Components - Web component concept explained in compact form<\/title>\n<meta name=\"description\" content=\"What are Web Components? \u2705 Why do I need a Web Component? \u2705 How do Web Components work? \u2705 Learn more now...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/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 - Web component concept explained in compact form\" \/>\n<meta property=\"og:description\" content=\"What are Web Components? \u2705 Why do I need a Web Component? \u2705 How do Web Components work? \u2705 Learn more now...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/\" \/>\n<meta property=\"og:site_name\" content=\"Rock the Prototype - Softwareentwicklung &amp; Prototyping\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-01T08:17:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2022\/07\/Web-Components.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1686\" \/>\n\t<meta property=\"og:image:height\" content=\"910\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/learn-programming\\\/web-components\\\/\",\"url\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/learn-programming\\\/web-components\\\/\",\"name\":\"Web Components - Web component concept explained in compact form\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/learn-programming\\\/web-components\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/learn-programming\\\/web-components\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rock-the-prototype.com\\\/wp-content\\\/uploads\\\/2022\\\/07\\\/Web-Components.jpg\",\"datePublished\":\"2024-12-01T07:47:32+00:00\",\"dateModified\":\"2024-12-01T08:17:03+00:00\",\"description\":\"What are Web Components? \u2705 Why do I need a Web Component? \u2705 How do Web Components work? \u2705 Learn more now...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/learn-programming\\\/web-components\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/learn-programming\\\/web-components\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/learn-programming\\\/web-components\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rock-the-prototype.com\\\/wp-content\\\/uploads\\\/2022\\\/07\\\/Web-Components.jpg\",\"contentUrl\":\"https:\\\/\\\/rock-the-prototype.com\\\/wp-content\\\/uploads\\\/2022\\\/07\\\/Web-Components.jpg\",\"width\":1686,\"height\":910,\"caption\":\"Web-Components - Wiederverwertbare Web-Elemente clever nutzen.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/learn-programming\\\/web-components\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/rock-the-prototype\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Prototyping Wiki\",\"item\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/wiki\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Web Components\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/\",\"name\":\"Rock the Prototype - Softwareentwicklung &amp; Prototyping\",\"description\":\"Prototyping: Software Prototypen, Software entwickeln &amp; Programmieren im Team\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web Components - Web component concept explained in compact form","description":"What are Web Components? \u2705 Why do I need a Web Component? \u2705 How do Web Components work? \u2705 Learn more now...","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:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/","og_locale":"en_US","og_type":"article","og_title":"Web Components - Web component concept explained in compact form","og_description":"What are Web Components? \u2705 Why do I need a Web Component? \u2705 How do Web Components work? \u2705 Learn more now...","og_url":"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/","og_site_name":"Rock the Prototype - Softwareentwicklung &amp; Prototyping","article_modified_time":"2024-12-01T08:17:03+00:00","og_image":[{"width":1686,"height":910,"url":"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2022\/07\/Web-Components.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/","url":"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/","name":"Web Components - Web component concept explained in compact form","isPartOf":{"@id":"https:\/\/rock-the-prototype.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#primaryimage"},"image":{"@id":"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#primaryimage"},"thumbnailUrl":"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2022\/07\/Web-Components.jpg","datePublished":"2024-12-01T07:47:32+00:00","dateModified":"2024-12-01T08:17:03+00:00","description":"What are Web Components? \u2705 Why do I need a Web Component? \u2705 How do Web Components work? \u2705 Learn more now...","breadcrumb":{"@id":"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#primaryimage","url":"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2022\/07\/Web-Components.jpg","contentUrl":"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2022\/07\/Web-Components.jpg","width":1686,"height":910,"caption":"Web-Components - Wiederverwertbare Web-Elemente clever nutzen."},{"@type":"BreadcrumbList","@id":"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/rock-the-prototype.com\/en\/rock-the-prototype\/"},{"@type":"ListItem","position":2,"name":"Prototyping Wiki","item":"https:\/\/rock-the-prototype.com\/en\/wiki\/"},{"@type":"ListItem","position":3,"name":"Web Components"}]},{"@type":"WebSite","@id":"https:\/\/rock-the-prototype.com\/en\/#website","url":"https:\/\/rock-the-prototype.com\/en\/","name":"Rock the Prototype - Softwareentwicklung &amp; Prototyping","description":"Prototyping: Software Prototypen, Software entwickeln &amp; Programmieren im Team","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rock-the-prototype.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/encyclopedia\/5335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/encyclopedia"}],"about":[{"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/types\/encyclopedia"}],"author":[{"embeddable":true,"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/media\/3370"}],"wp:attachment":[{"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/media?parent=5335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/categories?post=5335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/tags?post=5335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}