[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-article-are-web-components-dead":3},{"meta":4,"html":30,"authorName":31,"authorFacebookUrl":32,"authorProfileImage":33,"authorWebsite":34,"authorJobTitle":35,"authorTwitterUrl":36,"wordCount":37,"recommended":38},{"id":5,"slug":6,"type":7,"title":8,"excerpt":9,"metaTitle":10,"metaDescription":10,"canonicalUrl":10,"featureImage":11,"publishedAt":17,"createdAt":18,"updatedAt":19,"featured":20,"readingTime":21,"tags":22,"author":29,"recommendedSlugs":10},"64d9d5fdf8c6b205910d9684","are-web-components-dead","post","Are Web Components Dead?","Explore the future of web components, their impact on modern web development, and if they are still relevant in the current tech landscape.",null,{"url":12,"alt":13,"caption":14,"width":15,"height":16},"\u002Fblog\u002Fcontent\u002Fimages\u002F2023\u002F08\u002F1_g-iH_T_gw-LQ7cmxoyoONA.jpg","Skeleton in forest: Are Web Components Dead?","Photo by Chris J Mitchell from \u003Ca href=\"https:\u002F\u002Fwww.pexels.com\u002Fde-de\u002Ffoto\u002Fselektive-fokusfotografie-des-skeletts-1528375\u002F\" rel=\"noopener\">Pexels\u003C\u002Fa>",1600,1067,"2023-08-14T07:40:03.000+00:00","2023-08-14T07:21:33.000+00:00","2024-07-23T12:07:31.000+00:00",false,10,[23,26],{"name":24,"slug":25},"Web Components","web-components",{"name":27,"slug":28},"Web Development","web-development","marius-bongarts","\u003Cp>\n  Recently, I published an article with a different question on a similar topic:\n  \u003Ca\n    href=\"https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fwill-web-components-replace-frontend-frameworks-they-are-built-to-solve-different-problems\u002F\"\n  >\n    Will Web Components Replace Frontend Frameworks?\n  \u003C\u002Fa>\n  Most of us would say\n  \u003Cstrong>NO\u003C\u002Fstrong>\n  . But what's your answer regarding the more controversial question of whether\n  \u003Cstrong>Web Components\u003C\u002Fstrong>\n  have a future at all?\n\u003C\u002Fp>\n\u003Cp>\n  Let's zoom in and explore why some say that Web Components have already died while others think they're the future of\n  web development.\n\u003C\u002Fp>\n\u003Chr \u002F>\n\u003Ch3 id=\"introduction\">Introduction\u003C\u002Fh3>\n\u003Cp>\n  In 2012, when the W3C launched the\n  \u003Ca href=\"https:\u002F\u002Fwww.w3.org\u002FTR\u002F2012\u002FWD-components-intro-20120522\u002F#decorators-vs-custom-elements\" rel=\"noopener\">\n    first specification\n  \u003C\u002Fa>\n  of Web Components, many expected that Web Components would revolutionize frontend development. And there is good\n  reason to be optimistic. Web Components promised many remarkable things:\n\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>\n    Reusable components with\n    \u003Cstrong>plain HTML, CSS, Javascript\u003C\u002Fstrong>\n  \u003C\u002Fli>\n  \u003Cli>\n    Based on\n    \u003Cstrong>official web standards\u003C\u002Fstrong>\n  \u003C\u002Fli>\n  \u003Cli>\n    \u003Cstrong>No framework\u003C\u002Fstrong>\n    needed\n  \u003C\u002Fli>\n  \u003Cli>\n    Supported in\n    \u003Cstrong>all evergreen browsers\u003C\u002Fstrong>\n  \u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\n  But, the idea of creating reusable standalone HTML components based on official web standards without any framework\n  sounded too good to be true. Despite the promising advantages, Web Components continuously struggle to find\n  industrywide adoption. Many developers say they have already died.\n\u003C\u002Fp>\n\u003Cp>\n  Who's right? What is the current state of Web Components? Let's face these questions in detail and explore what web\n  components are, where we can find them, why developers are reluctant to use them, and what the future holds.\n\u003C\u002Fp>\n\u003Ch3 id=\"what-are-web-components\">What are Web Components?\u003C\u002Fh3>\n\u003Cp>\n  Web Components are reusable client-side components based on official web standards and supported by all major\n  browsers. They are an excellent way of\n  \u003Cstrong>encapsulating\u003C\u002Fstrong>\n  functionality\n  \u003Cstrong>\u003C\u002Fstrong>\n  from the rest of our code. Not only that, but you can\n  \u003Cstrong>reuse\u003C\u002Fstrong>\n  them in every web application and web page.\n\u003C\u002Fp>\n\u003Cp>\n  Their purpose is to write strongly encapsulated custom elements to use everywhere. Web Components enable us to develop\n  entirely independently of frontend frameworks.\n\u003C\u002Fp>\n\u003Cblockquote>\n  The primary benefit of Web Components is that we can use them everywhere. With any framework, or even without a\n  framework. -\n  \u003Ca href=\"https:\u002F\u002Fv3.vuejs.org\u002Fguide\u002Fweb-components.html\" rel=\"nofollow noopener noopener noopener noopener\">\n    vuejs.org\n  \u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cp>\n  \u003Cstrong>\u003Cem>How do they work?\u003C\u002Fem>\u003C\u002Fstrong>\n\u003C\u002Fp>\n\u003Cp>\n  Here's an example of how an\n  \u003Cstrong>autonomous web component\u003C\u002Fstrong>\n  can be defined:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist124057544\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-index-js\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-javascript  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"index.js content, created by MariusBongarts on 07:25AM on August 14, 2023.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"index.js\">\n        \u003Ctr>\n          \u003Ctd id=\"file-index-js-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-js-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>class\u003C\u002Fspan> \u003Cspan class=pl-v>MyWebComponent\u003C\u002Fspan> \u003Cspan class=pl-k>extends\u003C\u002Fspan> \u003Cspan class=pl-v>HTMLElement\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>...\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-js-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-js-LC2\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-smi>window\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>customElements\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>define\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s>'my-web-component'\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-v>MyWebComponent\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fbe8c916dbd4291c4504a8205a0a24a5a\u002Fraw\u002F6e4fb1a7b3f276a95763be0cd91beb4de0ed7afc\u002Findex.js\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fbe8c916dbd4291c4504a8205a0a24a5a#file-index-js\" class=\"Link--inTextBlock\">\n          index.js\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>You can pass your element to any HTML page like this:\u003C\u002Fp>\n\u003Cp>\u003Ccode><my-web-component value=\"something\"><\u002Fmy-web-component>\u003C\u002Fcode>\u003C\u002Fp>\n\u003Cp>For more details on web components, check out my other articles:\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-bookmark-card kg-card-hascaption\">\n  \u003Ca\n    class=\"kg-bookmark-container\"\n    href=\"https:\u002F\u002Fmedium.com\u002F@mariusbongarts\u002Fthe-complete-web-component-guide-part-1-custom-elements-a627af805df8\"\n  >\n    \u003Cdiv class=\"kg-bookmark-content\">\n      \u003Cdiv class=\"kg-bookmark-title\">The Complete Web Component Guide: Custom Elements\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-description\">Become an expert in the future of Web Development (Part 1)\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-metadata\">\n        \u003Cimg\n          class=\"kg-bookmark-icon\"\n          src=\"https:\u002F\u002Fcdn-static-1.medium.com\u002F_\u002Ffp\u002Ficons\u002FMedium-Avatar-500x500.svg\"\n          alt=\"\"\n        \u002F>\n        \u003Cspan class=\"kg-bookmark-author\">Medium\u003C\u002Fspan>\n        \u003Cspan class=\"kg-bookmark-publisher\">Marius Bongarts\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"kg-bookmark-thumbnail\">\n      \u003Cimg src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1200\u002F1*KE5bZMF41HQnn2bupDozcQ.png\" alt=\"\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fa>\n  \u003Cfigcaption>Complete Web Component Guide\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Ch3 id=\"where-can-you-find-web-components\">\u003Cstrong>Where can you find Web Components?\u003C\u002Fstrong>\u003C\u002Fh3>\n\u003Cp>\n  The web development world is undoubtedly ruled by frontend frameworks\u002Flibraries like\n  \u003Cstrong>React, Angular, and Vue.js.\u003C\u002Fstrong>\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*vV0OT17uIP-hwxQkYGCQYQ.png\"\n    class=\"kg-image\"\n    alt=\"State of JS 2022\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>\n    \u003Ca\n      href=\"https:\u002F\u002F2022.stateofjs.com\u002Fen-US\u002Flibraries\u002Ffront-end-frameworks\u002F\"\n      data-href=\"https:\u002F\u002F2022.stateofjs.com\u002Fen-US\u002Flibraries\u002Ffront-end-frameworks\u002F\"\n      class=\"markup--anchor markup--figure-anchor\"\n      rel=\"noopener\"\n      target=\"_blank\"\n    >\n      State of JS 2022\n    \u003C\u002Fa>\n  \u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>\n  The State of JavaScript Survey of 2021 shows that 80 % of the respondents have used\n  \u003Cstrong>React\u003C\u002Fstrong>\n  , followed by\n  \u003Cstrong>Angular\u003C\u002Fstrong>\n  (54 %) and\n  \u003Cstrong>Vue.js\u003C\u002Fstrong>\n  (51 %). Also,\n  \u003Cstrong>Svelte\u003C\u002Fstrong>\n  moves up quickly and gets more and more users. Now, where do\n  \u003Cstrong>Web Components\u003C\u002Fstrong>\n  show up in this ranking? Web Components are entirely based on web standards, so we do not expect them to be listed\n  here. Still, there are libraries like\n  \u003Cstrong>Lit\u003C\u002Fstrong>\n  that support us in building them. After all, at least 7 % of the respondents have used it.\n\u003C\u002Fp>\n\u003Ch4 id=\"frontend-frameworks-adapt-to-web-components\">\u003Cstrong>Frontend Frameworks adapt to Web Components\u003C\u002Fstrong>\u003C\u002Fh4>\n\u003Cp>\n  However, this is only half the truth. The most-used frontend frameworks have seen quite a bit of adoption lately. All\n  of them support building official standard-based Web Components.\n\u003C\u002Fp>\n\u003Cp>\n  Let's take\n  \u003Cstrong>Angular\u003C\u002Fstrong>\n  , which provides the\n  \u003Ccode>@angular\u002Felements\u003C\u002Fcode>\n  package enabling developers to transform a component into a Web Component quickly.\n\u003C\u002Fp>\n\u003Cblockquote class=\"kg-blockquote-alt\">\n  \"Angular elements are Angular components packaged as custom elements […] \" -\n  \u003Ca href=\"https:\u002F\u002Fangular.io\u002Fguide\u002Felements\" rel=\"noopener ugc nofollow noopener noopener\">angular.io\u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cp>\n  Angular Elements is a minimal, self-contained version of the Angular framework. It is injected as a service to support\n  the component's change-detection and data-binding functionality. If you are interested in how Angular Elements works\n  in detail, here is an interesting\n  \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=Z1gLFPLVJjY&t=4s\" rel=\"noopener\">Youtube video by Rob Wormald\u003C\u002Fa>\n  .\n\u003C\u002Fp>\n\u003Cp>\n  Similarly, also,\n  \u003Cstrong>Vue.js\u003C\u002Fstrong>\n  supports creating Web Components via the\n  \u003Ccode>defineCustomElement\u003C\u002Fcode>\n  method.\n\u003C\u002Fp>\n\u003Cblockquote>\n  \u003Cem>“Vue supports creating custom elements using exactly the same Vue component APIs […] ” — \u003C\u002Fem>\n  \u003Ca\n    href=\"https:\u002F\u002Fv3.vuejs.org\u002Fguide\u002Fweb-components.html#passing-dom-properties\"\n    rel=\"noopener ugc nofollow noopener noopener\"\n  >\n    \u003Cem>vuejs.org\u003C\u002Fem>\n  \u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cp>\n  Having the most popular and most-used frameworks adapting to Web Components shows that their creators bet on a future\n  with Web Components.\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-bookmark-card kg-card-hascaption\">\n  \u003Ca class=\"kg-bookmark-container\" href=\"https:\u002F\u002Fmedium.com\u002F@mariusbongarts\u002Freact-vs-web-components-80d754f74811\">\n    \u003Cdiv class=\"kg-bookmark-content\">\n      \u003Cdiv class=\"kg-bookmark-title\">React vs. Web Components\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-description\">Combining them is the genuine secret to success.\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-metadata\">\n        \u003Cimg\n          class=\"kg-bookmark-icon\"\n          src=\"https:\u002F\u002Fcdn-static-1.medium.com\u002F_\u002Ffp\u002Ficons\u002FMedium-Avatar-500x500.svg\"\n          alt=\"\"\n        \u002F>\n        \u003Cspan class=\"kg-bookmark-author\">Medium\u003C\u002Fspan>\n        \u003Cspan class=\"kg-bookmark-publisher\">Marius Bongarts\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"kg-bookmark-thumbnail\">\n      \u003Cimg src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1200\u002F1*_DkdD2OIUAxz8M_0_8lDxw.png\" alt=\"\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fa>\n  \u003Cfigcaption>React vs Web Components\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Chr \u002F>\n\u003Ch4 id=\"usage-of-web-components\">Usage of Web Components\u003C\u002Fh4>\n\u003Cp>\n  As we can see, Web Components are more present than we may have thought. However, sometimes a framework is still used\n  to create them. However, how can we measure the actual usage of Web Components? One approach would be to look at how\n  often a website registers at least one\n  \u003Ca href=\"https:\u002F\u002Fmedium.com\u002F@mariusbongarts11\u002Fthe-complete-web-component-guide-part-1-custom-elements-a627af805df8\">\n    \u003Cstrong>custom element\u003C\u002Fstrong>\n  \u003C\u002Fa>\n  \u003Cstrong>\u003C\u002Fstrong>\n  by calling\n  \u003Ccode>customElements.define\u003C\u002Fcode>\n  .\n\u003C\u002Fp>\n\u003Cp>As a reminder, here is how to define a custom element:\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist124057544\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-index-js\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-javascript  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"index.js content, created by MariusBongarts on 07:25AM on August 14, 2023.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"index.js\">\n        \u003Ctr>\n          \u003Ctd id=\"file-index-js-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-js-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>class\u003C\u002Fspan> \u003Cspan class=pl-v>MyWebComponent\u003C\u002Fspan> \u003Cspan class=pl-k>extends\u003C\u002Fspan> \u003Cspan class=pl-v>HTMLElement\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>...\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-js-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-js-LC2\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-smi>window\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>customElements\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>define\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s>'my-web-component'\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-v>MyWebComponent\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fbe8c916dbd4291c4504a8205a0a24a5a\u002Fraw\u002F6e4fb1a7b3f276a95763be0cd91beb4de0ed7afc\u002Findex.js\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fbe8c916dbd4291c4504a8205a0a24a5a#file-index-js\" class=\"Link--inTextBlock\">\n          index.js\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  For Chrome, we can do that by checking the CustomElementRegistryDefine feature usage on\n  \u003Ca href=\"https:\u002F\u002Fchromestatus.com\u002Fmetrics\u002Ffeature\u002Ftimeline\u002Fpopularity\u002F1689\" rel=\"noopener\">chromestatus.com\u003C\u002Fa>\n  :\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*LIk2CfjSNg1QO2NyGPXswg.png\"\n    class=\"kg-image\"\n    alt=\"Percentage of page loads (in Chrome) that use CustomElementRegistryDefine (Source: chromestatus.com)\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>\n    Percentage of page loads (in Chrome) that use CustomElementRegistryDefine (Source:\n    \u003Ca\n      href=\"https:\u002F\u002Fchromestatus.com\u002Fmetrics\u002Ffeature\u002Ftimeline\u002Fpopularity\u002F1689\"\n      data-href=\"https:\u002F\u002Fchromestatus.com\u002Fmetrics\u002Ffeature\u002Ftimeline\u002Fpopularity\u002F1689\"\n      class=\"markup--anchor markup--figure-anchor\"\n      rel=\"noopener ugc nofollow noopener noopener noopener noopener noopener noopener\"\n      target=\"_blank\"\n    >\n      chromestatus.com\n    \u003C\u002Fa>\n    )\n  \u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>\n  You can see that around 20\n  \u003Cstrong>%\u003C\u002Fstrong>\n  of all websites, viewed in a Chrome browser, register at least one\n  \u003Ca\n    href=\"https:\u002F\u002Fmedium.com\u002F@mariusbongarts11\u002Fthe-complete-web-component-guide-part-1-custom-elements-a627af805df8\"\n    rel=\"noopener\"\n  >\n    \u003Cstrong>Custom Element\u003C\u002Fstrong>\n  \u003C\u002Fa>\n  . For me, this dramatic growth of Web Components was astonishing. Compared to that, and according to\n  \u003Ca\n    href=\"https:\u002F\u002Fw3techs.com\u002Ftechnologies\u002Fcomparison\u002Fjs-angularjs,js-react\"\n    rel=\"noopener ugc nofollow noopener noopener\"\n  >\n    w3techs.com\n  \u003C\u002Fa>\n  , only\n  \u003Cstrong>2.9 %\u003C\u002Fstrong>\n  (Status: June 2022) of all websites use React.\n\u003C\u002Fp>\n\u003Cp>\n  Well, it seems that Web Components'usage is higher than most of us expected (at least, that is what I assume). But,\n  what about big companies? When looking at job descriptions, most of them require experience with at least one of the\n  most used frontend frameworks — React, Angular, and Vue.js. So, are there companies requiring to know about Web\n  Components? Are there big companies that have decided that Web Components is the best way to implement their frontend?\n\u003C\u002Fp>\n\u003Cp>\n  One of the most famous examples is\n  \u003Cstrong>Github\u003C\u002Fstrong>\n  . When Github launched over a decade ago, it had a frontend codebase that mostly used jQuery. Over the years, their\n  GitHub monolith grew in size, and they saw the need to implement better encapsulation before the frontend became\n  unmanageable. They chose to use Web Components because their codebase was already structured into component-like\n  behaviors. Furthermore, they could experiment with Web Components alongside their existing frontend infrastructure\n  since it doesn't incur any upfront cost or \"buy-in\" to a specific framework.\n\u003C\u002Fp>\n\u003Cblockquote>\n  \"We're using Web Components in a big way at GitHub\" -\n  \u003Ca href=\"https:\u002F\u002Fgithub.blog\u002F2021-05-04-how-we-use-web-components-at-github\u002F\" rel=\"nofollow noopener noopener\">\n    github.blog\n  \u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cp>\n  But, also Github faced many problems when navigating to a frontend infrastructure using Web Components. There are some\n  common\n  \u003Cstrong>pain points\u003C\u002Fstrong>\n  that all developers have with the current state of Web Components. That leads us to our next question.\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-bookmark-card kg-card-hascaption\">\n  \u003Ca\n    class=\"kg-bookmark-container\"\n    href=\"https:\u002F\u002Flevelup.gitconnected.com\u002Fweb-components-at-big-tech-companies-github-812e632e1650\"\n  >\n    \u003Cdiv class=\"kg-bookmark-content\">\n      \u003Cdiv class=\"kg-bookmark-title\">Web Components at Big Tech Companies: Github\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-description\">If the enterprise can deploy web components so can you!\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-metadata\">\n        \u003Cimg\n          class=\"kg-bookmark-icon\"\n          src=\"https:\u002F\u002Fcdn-static-1.medium.com\u002F_\u002Ffp\u002Ficons\u002FMedium-Avatar-500x500.svg\"\n          alt=\"\"\n        \u002F>\n        \u003Cspan class=\"kg-bookmark-author\">Level Up Coding\u003C\u002Fspan>\n        \u003Cspan class=\"kg-bookmark-publisher\">Marius Bongarts\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"kg-bookmark-thumbnail\">\n      \u003Cimg src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1200\u002F1*qXdGMMAGzO36nj5XmoJ5KQ.png\" alt=\"\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fa>\n  \u003Cfigcaption>Web Components at Big tech Companies\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Chr \u002F>\n\u003Ch3 id=\"why-are-developers-reluctant-to-use-web-components\">Why are developers reluctant to use web components?\u003C\u002Fh3>\n\u003Cp>\n  As mentioned at the beginning, there are plenty of reasons to believe that Web Components could replace modern\n  frontend frameworks. Now, a lot of developers are still reluctant to use Web Components. Why is that? Is it because\n  they feel threatened by the thought of Web Components wiping out frontend frameworks? As I already analyzed in my\n  former article '\n  \u003Ca href=\"https:\u002F\u002Fmedium.com\u002F@mariusbongarts11\u002Fwill-web-components-replace-frontend-frameworks-535891d779ba\">\n    Will Web Components Replace Frontend Frameworks?\n  \u003C\u002Fa>\n  ' — there is no reason to drop your frontend framework. Quite the reversal, combining frontend frameworks with Web\n  Components is the real secret to success.\n\u003C\u002Fp>\n\u003Cblockquote>\n  \u003Cem>\n    As a developer, you are free to use React in your Web Components, or to use Web Components in React, or both. — \n  \u003C\u002Fem>\n  \u003Ca href=\"https:\u002F\u002Freactjs.org\u002Fdocs\u002Fweb-components.html\" rel=\"noopener ugc nofollow noopener noopener\">\n    \u003Cem>reactjs.or\u003C\u002Fem>\n  \u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cp>\n  Nevertheless, there is no getting around the fact that Web Components are not yet fully developed and face many\n  problems and pain points.\n\u003C\u002Fp>\n\u003Ch4 id=\"problems-of-web-components\">\u003Cstrong>Problems of Web Components\u003C\u002Fstrong>\u003C\u002Fh4>\n\u003Cp>\n  Let's look at the difficulties Web Components face in the current state. Here are some of the developers' most common\n  problems when working with them.\n\u003C\u002Fp>\n\u003Chr \u002F>\n\u003Cp>\u003Cstrong>Shadow DOM\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>\n  One pain point of Web Components is the\n  \u003Ca href=\"https:\u002F\u002Fmedium.com\u002F@mariusbongarts11\u002Fthe-complete-web-component-guide-shadow-dom-2e40921eb77\">Shadow DOM\u003C\u002Fa>\n  . While the idea of having wholly encapsulated markup and style of components is excellent, there are still many\n  challenges and open questions. For example, how to apply\n  \u003Cstrong>global styles\u003C\u002Fstrong>\n  to Web Components with shadow roots? Indeed, the Shadow DOM allows us to modify styles within their roots by using,\n  e.g.,\n  \u003Cstrong>Shadow Parts\u003C\u002Fstrong>\n  and\n  \u003Cstrong>CSS variables\u003C\u002Fstrong>\n  . Also, there are many approaches and workarounds to apply global styles, but I haven't seen the ultimate solution.\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-bookmark-card kg-card-hascaption\">\n  \u003Ca\n    class=\"kg-bookmark-container\"\n    href=\"https:\u002F\u002Fmedium.com\u002F@mariusbongarts\u002Fthe-complete-web-component-guide-shadow-dom-2e40921eb77\"\n  >\n    \u003Cdiv class=\"kg-bookmark-content\">\n      \u003Cdiv class=\"kg-bookmark-title\">The Complete Web Component Guide: Shadow DOM\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-description\">Become an expert in the future of Web Development (Part 3)\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-metadata\">\n        \u003Cimg\n          class=\"kg-bookmark-icon\"\n          src=\"https:\u002F\u002Fcdn-static-1.medium.com\u002F_\u002Ffp\u002Ficons\u002FMedium-Avatar-500x500.svg\"\n          alt=\"\"\n        \u002F>\n        \u003Cspan class=\"kg-bookmark-author\">Medium\u003C\u002Fspan>\n        \u003Cspan class=\"kg-bookmark-publisher\">Marius Bongarts\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"kg-bookmark-thumbnail\">\n      \u003Cimg src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1200\u002F1*KE5bZMF41HQnn2bupDozcQ.png\" alt=\"\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fa>\n  \u003Cfigcaption>The Complete Web Component Guide\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>\n  \u003Cstrong>Github\u003C\u002Fstrong>\n  also faces problems when working with Shadow DOM and is supporting an open Github proposal for\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fwhatwg\u002Fdom\u002Fissues\u002F831\" rel=\"noopener\">declarative Shadow DOMs\u003C\u002Fa>\n  . That could solve some common issues developers face when working with shadow roots.\n\u003C\u002Fp>\n\u003Cblockquote>\n  \u003Ca href=\"https:\u002F\u002Fgithub.blog\u002F2021-05-04-how-we-use-web-components-at-github\u002F\" rel=\"noopener\">github.blog\u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cp>\n  But, the primary motivation for this proposal is the support of Server Side Rendering (SSR) for Web Components. That\n  leads us to the next problem.\n\u003C\u002Fp>\n\u003Chr \u002F>\n\u003Cp>\u003Cstrong>Server Side Rendering\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>\n  All modern frameworks provide a way to server-side render their components. For example, Angular provides\n  \u003Cstrong>Angular Universal\u003C\u002Fstrong>\n  , React a\n  \u003Cstrong>ReactDOMServer\u003C\u002Fstrong>\n  , and Vue.js provides a\n  \u003Ccode>renderToString\u003C\u002Fcode>\n  function.\n\u003C\u002Fp>\n\u003Cp>\n  Using\n  \u003Cstrong>SSR\u003C\u002Fstrong>\n  in combination with Web Components is practically\n  \u003Cstrong>difficult\u003C\u002Fstrong>\n  or\n  \u003Cstrong>impossible\u003C\u002Fstrong>\n  to use. Web Components rely on browser-specific DOM APIs that are unavailable on the server. At least not until you\n  use some headless browser like Puppeteer to pre-render your components and send an initial string to the browser. But,\n  even when pre-rendering your components, we can not yet use the Shadow DOM because we can not represent them\n  declaratively yet. Therefore, it is impossible to send it over in the initial string of HTML. To put it short:\n  \u003Cstrong>To use Shadow DOM, we need JavaScript\u003C\u002Fstrong>\n  .\n\u003C\u002Fp>\n\u003Cp>\n  Luckily, there are libraries like Lit or Stencil to help us in building Web Components. Stencil already provides their\n  \u003Ca href=\"https:\u002F\u002Fstenciljs.com\u002Fdocs\u002Fhydrate-app\" rel=\"noopener\">\u003Cstrong>Hydrate App-Bundle\u003C\u002Fstrong>\u003C\u002Fa>\n  to accomplish SSR, and also\n  \u003Ca\n    href=\"https:\u002F\u002Fmedium.com\u002F@mariusbongarts\u002Fbuild-your-own-blog-portfolio-with-web-components-lit-library-2701dffc735f\"\n  >\n    \u003Cstrong>Lit\u003C\u002Fstrong>\n  \u003C\u002Fa>\n  is working on a\n  \u003Ccode>@lit-lab\u002Fssr\u003C\u002Fcode>\n  package for server-side rendering.\n\u003C\u002Fp>\n\u003Chr \u002F>\n\u003Cp>\u003Cstrong>Accessibility\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>\n  One more concern we need to keep in mind when working with Web Components is accessibility.\n  \u003Cstrong>Accessibility\u003C\u002Fstrong>\n  aims to provide a universally accessible global information system for everyone. By that, we ensure that people with\n  disabilities can use all website tools and technologies.\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-bookmark-card kg-card-hascaption\">\n  \u003Ca\n    class=\"kg-bookmark-container\"\n    href=\"https:\u002F\u002Fmedium.com\u002F@mariusbongarts\u002F4-simple-steps-to-make-your-website-accessible-a29ec305da1e\"\n  >\n    \u003Cdiv class=\"kg-bookmark-content\">\n      \u003Cdiv class=\"kg-bookmark-title\">4 Simple Steps to Make Your Website Accessible\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-description\">\n        “The power of the Web is in its universality. Access by everyone regardless of disability is an essential\n        aspect.” — Tim Berners-Lee\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-metadata\">\n        \u003Cimg\n          class=\"kg-bookmark-icon\"\n          src=\"https:\u002F\u002Fcdn-static-1.medium.com\u002F_\u002Ffp\u002Ficons\u002FMedium-Avatar-500x500.svg\"\n          alt=\"\"\n        \u002F>\n        \u003Cspan class=\"kg-bookmark-author\">Medium\u003C\u002Fspan>\n        \u003Cspan class=\"kg-bookmark-publisher\">Marius Bongarts\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"kg-bookmark-thumbnail\">\n      \u003Cimg src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1000\u002F1*nyXM1fezkK-0J8kwH-x_OQ.png\" alt=\"\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fa>\n  \u003Cfigcaption>Simple Steps to Make Your Website Accessible\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>\n  This problem can also be traced back to the\n  \u003Ca href=\"https:\u002F\u002Fmedium.com\u002F@mariusbongarts\u002Fthe-complete-web-component-guide-shadow-dom-2e40921eb77\">\n    \u003Cstrong>Shadow DOM\u003C\u002Fstrong>\n  \u003C\u002Fa>\n  . Typically, you create DOM nodes and append them as children of another element. With Shadow DOM, you create a scoped\n  DOM tree that's attached to the element but separate from its actual children. This scoped subtree is called a\n  \u003Cstrong>shadow tree\u003C\u002Fstrong>\n  and is essentially a document on its own. Having a new document means that if an id is set inside the shadow DOM, it\n  only has to be unique inside that custom element.\n\u003C\u002Fp>\n\u003Cblockquote>\n  Web Components are forced to use ARIA to declare their default semantics. -\n  \u003Ca href=\"https:\u002F\u002Fwicg.github.io\u002Faom\u002Fexplainer.html\" rel=\"nofollow noopener noopener\">wicg.github.io\u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cp>\n  Hopefully, you know that by using correct\n  \u003Ca href=\"https:\u002F\u002Fjavascript.plainenglish.io\u002Fstop-using-divs-for-buttons-87a0b3d7945e\" rel=\"noopener\">\n    semantic elements\n  \u003C\u002Fa>\n  , you directly provide built-in accessibility features for elements like\n  \u003Cstrong>buttons\u003C\u002Fstrong>\n  or\n  \u003Cstrong>forms\u003C\u002Fstrong>\n  . Unfortunately, when creating custom elements we have to add all those properties ourselves to provide the same\n  accessibility features. Ideally, custom elements should have default implicit semantics just like native elements.\n  Luckily, there is the\n  \u003Ca href=\"https:\u002F\u002Fwicg.github.io\u002Faom\u002Fexplainer.html\" rel=\"noopener\">\n    \u003Cstrong>Accessibility Object Model (AOM)\u003C\u002Fstrong>\n  \u003C\u002Fa>\n  proposal, that aims to include this using\n  \u003Ccode>ElementInternals\u003C\u002Fcode>\n  .\n\u003C\u002Fp>\n\u003Cblockquote>\n  The Accessibility Object Model project aims to improve certain aspects of the user and developer experiences\n  concerning the interaction between web pages and assistive technology. -\n  \u003Cstrong>Accessibility Object Model\u003C\u002Fstrong>\n  \u003Ca href=\"https:\u002F\u002Fwicg.github.io\u002Faom\u002Fspec\u002F\" rel=\"nofollow noopener noopener\">wicg.github.io\u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cp>\n  Currently, we are forced to use so-called\n  \u003Cstrong>ARIA attributes\u003C\u002Fstrong>\n  within our Web Components to express semantics which is implicit for native elements. For example, if we use the\n  \u003Ccode>selected\u003C\u002Fcode>\n  attribute on an element like this:\n\u003C\u002Fp>\n\u003Cp>\u003Ccode><custom-option selected><\u002Fcustom-option>\u003C\u002Fcode>\u003C\u002Fp>\n\u003Cp>\n  We would also need to add an\n  \u003Cstrong>ARIA\u003C\u002Fstrong>\n  \u003Cstrong>attribute\u003C\u002Fstrong>\n  to it, to provide built-in accessibility features:\n\u003C\u002Fp>\n\u003Cp>\u003Ccode><custom-option selected aria-selected=\"true\"><\u002Fcustom-option>\u003C\u002Fcode>\u003C\u002Fp>\n\u003Cp>\n  The\n  \u003Cstrong>AOM\u003C\u002Fstrong>\n  now suggests using\n  \u003Ccode>ElementInternals\u003C\u002Fcode>\n  to set the default semantics to avoid the need for additional attributes, and also avoid losing its semantics if\n  developers forget to add\n  \u003Cstrong>ARIA attributes\u003C\u002Fstrong>\n  .\n\u003C\u002Fp>\n\u003Cp>\n  Using\n  \u003Ccode>ElementInternals\u003C\u002Fcode>\n  would look like this:\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-code-card\">\n  \u003Cpre>\u003Ccode>class CustomOption extends HTMLElement {  \n\tconstructor() {    \n    \tsuper();    \n        this._internals = customElements.createInternals(this);  \n     }  \n    \u002F\u002F ...\n}\u003C\u002Fcode>\u003C\u002Fpre>\n  \u003Cfigcaption>The AOM Code\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>\n  After all, we can say that providing accessibility for our Web Components is possible. But, at the moment it is still\n  connected to some extra effort.\n\u003C\u002Fp>\n\u003Ch3 id=\"what-does-the-future-hold\">What does the future hold?\u003C\u002Fh3>\n\u003Cp>\n  The fact that all modern frontend frameworks count on Web Components shows that their creators are planning with them\n  in the long run. But, as we saw, at the moment, working with Web Components is still connected to some non-trivial\n  problems. That's why most companies that have decided to go the Web Components route use libraries to make their lives\n  easier. For example, Github is using\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcatalyst\" rel=\"noopener\">\u003Cstrong>Catalyst\u003C\u002Fstrong>\u003C\u002Fa>\n  . Personally, I like to work with the\n  \u003Ca\n    href=\"https:\u002F\u002Fmedium.com\u002F@mariusbongarts\u002Fbuild-your-own-blog-portfolio-with-web-components-lit-library-2701dffc735f\"\n  >\n    \u003Cstrong>Lit\u003C\u002Fstrong>\n  \u003C\u002Fa>\n  library from which Catalyst took its inspiration.\n\u003C\u002Fp>\n\u003Cblockquote>\n  Catalyst, our open source library that makes it easier to write web components -\n  \u003Ca href=\"https:\u002F\u002Fgithub.blog\u002F2021-05-04-how-we-use-web-components-at-github\u002F\" rel=\"nofollow noopener noopener\">\n    github.blog\n  \u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cp>\n  Not only Github hit the Web Component way. Many more companies like\n  \u003Cstrong>Youtube\u003C\u002Fstrong>\n  ,\n  \u003Cstrong>SAP\u003C\u002Fstrong>\n  ,\n  \u003Cstrong>Salesforce,\u003C\u002Fstrong>\n  and many more have realized that combining Web Components with their current frontend architecture is a great way to\n  encapsulate parts of their application.\n\u003C\u002Fp>\n\u003Cblockquote>\n  YouTube is being rebuilt with Web Components.-\n  \u003Ca\n    href=\"https:\u002F\u002Freact-etc.net\u002Fentry\u002Fyoutube-is-being-rebuilt-on-web-components-and-polymer\"\n    rel=\"nofollow noopener noopener noopener\"\n  >\n    react-etc.net\n  \u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cp>\n  Having such big companies count on Web Components supports my personal opinion that there is no future without\n  \u003Cstrong>Web Components\u003C\u002Fstrong>\n  . But, there is also no near future without\n  \u003Cstrong>frontend frameworks\u003C\u002Fstrong>\n  . The goal of Web Components was never to replace them but to enhance them.\n\u003C\u002Fp>\n\u003Cp>\u003Cstrong>There is no need to hate Web Components.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-bookmark-card kg-card-hascaption\">\n  \u003Ca\n    class=\"kg-bookmark-container\"\n    href=\"https:\u002F\u002Flevelup.gitconnected.com\u002Fweb-components-at-big-tech-companies-youtube-84266bb507fd\"\n  >\n    \u003Cdiv class=\"kg-bookmark-content\">\n      \u003Cdiv class=\"kg-bookmark-title\">Web Components at Big Tech Companies: Youtube\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-description\">\n        Today, I don’t want to discuss whether Web Components will replace Frontend Frameworks. Also, I’m not eager to\n        discuss whether Frontend…\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-metadata\">\n        \u003Cimg\n          class=\"kg-bookmark-icon\"\n          src=\"https:\u002F\u002Fcdn-static-1.medium.com\u002F_\u002Ffp\u002Ficons\u002FMedium-Avatar-500x500.svg\"\n          alt=\"\"\n        \u002F>\n        \u003Cspan class=\"kg-bookmark-author\">Level Up Coding\u003C\u002Fspan>\n        \u003Cspan class=\"kg-bookmark-publisher\">Marius Bongarts\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"kg-bookmark-thumbnail\">\n      \u003Cimg src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1200\u002F1*HwqChAg2cMz4qj3z78B55g.png\" alt=\"\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fa>\n  \u003Cfigcaption>Web Components at Big Tech Companies\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Ch3 id=\"final-thoughts\">Final Thoughts\u003C\u002Fh3>\n\u003Cp>\n  Conclusively, it is beneficial for every developer to have at least heard of Web Components and, at best, even know\n  how to work with them. Existing proposals will hopefully solve many problems of Web Components. We can avoid them\n  using libraries like Lit, Stencil, or Catalyst. The realization that all modern frontend frameworks and many big\n  companies count on Web Components clearly shows that\n  \u003Cstrong>Web Components are not dead\u003C\u002Fstrong>\n  .\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-bookmark-card kg-card-hascaption\">\n  \u003Ca\n    class=\"kg-bookmark-container\"\n    href=\"https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fweb-highlights-pdf-web-hi\u002Fhldjnlbobkdkghfidgoecgmklcemanhm\"\n  >\n    \u003Cdiv class=\"kg-bookmark-content\">\n      \u003Cdiv class=\"kg-bookmark-title\">Web Highlights - PDF & Web Highlighter\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-description\">\n        Productivity Highlighter for any Website or PDF. Free and easy to use without signing up.\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-metadata\">\n        \u003Cimg class=\"kg-bookmark-icon\" src=\"https:\u002F\u002Fssl.gstatic.com\u002Fchrome\u002Fwebstore\u002Fimages\u002Ficon_144px.png\" alt=\"\" \u002F>\n        \u003Cspan class=\"kg-bookmark-author\">Chrome Web Store\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"kg-bookmark-thumbnail\">\n      \u003Cimg\n        src=\"https:\u002F\u002Flh3.googleusercontent.com\u002FQMe2Edixy8TJv_upGXXrdopiq2OT04q-ZFR0t_X-91Dew1Son8Y7_cbkh-Xx54XZb3VB5bxo2ffrVzvNP36PE7kR_Q=w128-h128-e365-rj-sc0x00ffffff\"\n        alt=\"\"\n      \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fa>\n  \u003Cfigcaption>Web Highlights\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n","Marius Bongarts","https:\u002F\u002Fwww.facebook.com\u002FMariusBongartsWeb","\u002Fblog\u002Fcontent\u002Fimages\u002F2022\u002F08\u002FIMG_7861_Square.jpeg","https:\u002F\u002Fmarius-bongarts.de\u002F","Founder & Software Engineer","https:\u002F\u002Ftwitter.com\u002FMariusBongarts",2469,[39,76,92],{"id":40,"slug":41,"title":42,"description":43,"url":44,"publishedAt":45,"createdAt":46,"updatedAt":47,"featured":20,"readingTime":48,"tags":49,"imageUrl":54,"imageAlt":55,"faviconUrl":56,"publishedAtString":45,"category":57,"readTimeString":75},"688719cf8b4b770aa39407fc","my-simple-strategy-for-3-268-5-star-chrome-extension-reviews","My Simple Strategy for 3,268 5‑Star Chrome Extension Reviews","Get 37x more reviews than Grammarly with this simple strategy. Learn the Win-Ask Method to boost your Chrome extension ratings and user engagement.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fmy-simple-strategy-for-3-268-5-star-chrome-extension-reviews\u002F","2025-07-28T06:48:26.000+00:00","2025-07-28T06:33:51.000+00:00","2025-07-28T07:04:33.000+00:00",6,[50,51,52,53],"Marketing","Side Projects","Side Hustle","Chrome Extension","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1633613286991-611fe299c4be?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDF8fHJhdGluZ3xlbnwwfHx8fDE3NTM2ODQ0MzR8MA&ixlib=rb-4.1.0&q=80&w=2000","Five yellow star-shaped objects placed diagonally on a pink and blue background.","https:\u002F\u002Fweb-highlights.com\u002Ffavicon.ico",[58,68],{"type":59,"title":60,"shortTitle":61,"icon":62,"description":63,"excerpt":64,"thumbnail":65},"my-journey","Behind the Scenes of Web Highlights","My Journey","rocket","Hey 👋 I am Marius. I started Web Highlights in 2019 as a tool just for myself and have been working on it alone since then. Learn from my mistakes and stories right from the beginning how I grew the Chrome Extension to 250K users without any marketing costs.","These posts are the honest build log of Web Highlights: what worked, what hurt, and what I’d do again. If you care about indie products, Chrome extensions, or SEO-led growth, you’ll find practical lessons alongside the personal story.",{"url":66,"alt":67},"https:\u002F\u002Fweb-highlights.com\u002Fimages\u002Fme.png","Me, Marius Bongarts, in front of sea in Portugal, Algarve",{"type":69,"title":70,"shortTitle":71,"icon":72,"description":73,"excerpt":74},"productivity","Browser Productivity & Chrome Extensions","Productivity","command","Curated extension lists, focus workflows, and tips for getting more from Chrome—always with an eye toward reading, capture, and learning.","Productivity isn’t only task managers. These articles cover the browser layer: extensions that protect focus, comparisons that save you from dead-end tools, and setup tips that keep your reading and capture stack lightweight but powerful.","6 min read",{"id":77,"slug":78,"title":79,"description":80,"url":81,"publishedAt":82,"createdAt":83,"updatedAt":82,"featured":20,"readingTime":48,"tags":84,"imageUrl":86,"imageAlt":87,"faviconUrl":56,"publishedAtString":82,"category":88,"readTimeString":75},"671f386db98706751d677b5f","how-to-show-a-link-preview-on-any-website","How To Show A Beautiful Link Preview On Any Website","Easily add link previews to any website using the open-source Previewbox library. Works with any framework, fetching Open Graph data automatically.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fhow-to-show-a-link-preview-on-any-website\u002F","2024-10-29T20:25:55.000+00:00","2024-10-28T07:08:29.000+00:00",[27,85],"SEO","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fcontent\u002Fimages\u002F2024\u002F10\u002F0_dkKw8Q1T3dUhNBo7.jpg","Lake with mountains in background",[89,91],{"type":59,"title":60,"shortTitle":61,"icon":62,"description":63,"excerpt":64,"thumbnail":90},{"url":66,"alt":67},{"type":69,"title":70,"shortTitle":71,"icon":72,"description":73,"excerpt":74},{"id":93,"slug":94,"title":95,"description":96,"url":97,"publishedAt":98,"createdAt":99,"updatedAt":100,"featured":20,"readingTime":101,"tags":102,"imageUrl":104,"imageAlt":105,"faviconUrl":56,"publishedAtString":98,"category":106,"readTimeString":109},"66ed6878e07b961e2f231a8f","lessons-from-a-bamboo-tree-staying-motivated-on-my-side-project","Five Years to 100K Users: The Bamboo Tree Story for Side Project Growth","Discover how a bamboo tree can inspire solopreneurs to stay motivated on side projects. Learn the value of delayed gratification on the journey to success.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Flessons-from-a-bamboo-tree-staying-motivated-on-my-side-project\u002F","2024-09-22T20:17:54.000+00:00","2024-09-20T12:20:08.000+00:00","2024-09-24T07:00:43.000+00:00",7,[61,103,51,52],"Story","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fcontent\u002Fimages\u002F2024\u002F09\u002F0_JjFAqJ78cyJMViqZ.webp","Tall Bamboo Tree",[107],{"type":59,"title":60,"shortTitle":61,"icon":62,"description":63,"excerpt":64,"thumbnail":108},{"url":66,"alt":67},"7 min read"]