[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-article-will-web-components-replace-frontend-frameworks-they-are-built-to-solve-different-problems":3},{"meta":4,"html":29,"authorName":30,"authorFacebookUrl":31,"authorProfileImage":32,"authorWebsite":33,"authorJobTitle":34,"authorTwitterUrl":35,"wordCount":36,"recommended":37},{"id":5,"slug":6,"type":7,"title":8,"excerpt":9,"metaTitle":10,"metaDescription":10,"canonicalUrl":10,"featureImage":11,"publishedAt":17,"createdAt":18,"updatedAt":17,"featured":19,"readingTime":20,"tags":21,"author":28,"recommendedSlugs":10},"6358eda272d57a060160cd51","will-web-components-replace-frontend-frameworks-they-are-built-to-solve-different-problems","post","Will Web Components Replace Frontend Frameworks?","Web Components will not replace frontend frameworks but they can enhance those frameworks by replacing their component layer with a native solution.",null,{"url":12,"alt":13,"caption":14,"width":15,"height":16},"\u002Fblog\u002Fcontent\u002Fimages\u002F2022\u002F10\u002Fwebcomponents.png","Pillow fights with Vue.js, React, and Web Components Logo on foreground","Photo by \u003Ca href=\"https:\u002F\u002Fwww.pexels.com\u002Fde-de\u002F@ketut-subiyanto?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels\" rel=\"noopener ugc nofollow\">Ketut Subiyanto\u003C\u002Fa> on \u003Ca href=\"https:\u002F\u002Fwww.pexels.com\u002Fde-de\u002Ffoto\u002Fliebe-menschen-frau-frauen-4760126\u002F?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels\" rel=\"noopener ugc nofollow\">Pexels\u003C\u002Fa>",720,478,"2022-10-26T08:37:43.000+00:00","2022-10-26T08:19:46.000+00:00",false,8,[22,25],{"name":23,"slug":24},"Web Components","web-components",{"name":26,"slug":27},"Web Development","web-development","marius-bongarts","\u003Cblockquote class=\"kg-blockquote-alt\">\n  “Any headline that ends in a question mark can be answered by the word no.” — Ian Betteridge\n\u003C\u002Fblockquote>\n\u003Cp>\n  \u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FBetteridge%27s_law_of_headlines\" rel=\"noopener\">\n    Betteridge's law of headlines\n  \u003C\u002Fa>\n  describes most likely your response to the offensive headline of this article. I never understood the ongoing war\n  between Web Components and JavaScript frameworks like Angular, React, VueJs, etc. Yet, combining the two could make\n  the world of frontend development so much easier and more efficient.\n\u003C\u002Fp>\n\u003Cp>\n  \u003Cstrong>\u003Cem>Disclaimer:\u003C\u002Fem>\u003C\u002Fstrong>\n  \u003Cem>\n    I know React is a library and not a framework, but for the purposes of this post I will refer to it as a framework.\n  \u003C\u002Fem>\n\u003C\u002Fp>\n\u003Chr \u002F>\n\u003Cp>\n  It seems that many developers feel threatened by the thought of Web Components wiping out frontend frameworks. That\n  won't happen because they are built to solve different problems.\n\u003C\u002Fp>\n\u003Cblockquote>\n  “Most people who use React don’t use Web Components, but you may want to […].” —\n  \u003Ca href=\"https:\u002F\u002Freactjs.org\u002Fdocs\u002Fweb-components.html\" rel=\"noopener ugc nofollow\">https:\u002F\u002Freactjs.org\u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cp>\n  It is a shame that Web Components are still going so unnoticed these days. In this article, I will tell you when you\n  should use them and why they will play a\n  \u003Cstrong>significant role\u003C\u002Fstrong>\n  in the future of frontend web development.\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>Web Components enable us to develop entirely independently of frontend frameworks.\u003C\u002Fp>\n\u003Cblockquote>\n  \u003Cem>\n    The primary benefit of Web Components is that we can use them everywhere. With any framework, or even without a\n    framework. —\n  \u003C\u002Fem>\n  \u003Ca href=\"https:\u002F\u002Fv3.vuejs.org\u002Fguide\u002Fweb-components.html\" rel=\"noopener ugc nofollow\">\u003Cem>vuejs.org\u003C\u002Fem>\u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Ch4 id=\"how-do-they-work\">How do they work?\u003C\u002Fh4>\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\u003Cp>\u003Ccode>class MyWebComponent extends HTTMLElement {...}\u003C\u002Fcode>\u003C\u002Fp>\n\u003Cp>\u003Ccode>window.customElements.define('my-web-component', MyWebComponent)\u003C\u002Fcode>\u003C\u002Fp>\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 this series of articles:\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-bookmark-card\">\n  \u003Ca\n    class=\"kg-bookmark-container\"\n    href=\"https:\u002F\u002Fmedium.com\u002F@mariusbongarts\u002Fshowcase-your-medium-articles-with-web-components-part-1-basics-d2c6618e9482\"\n  >\n    \u003Cdiv class=\"kg-bookmark-content\">\n      \u003Cdiv class=\"kg-bookmark-title\">Build Your Own Blog Portfolio with Web Components: The Basics\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-description\">Part 1 — Custom elements, Shadow DOM, and HTML Templates\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\u002Fmax\u002F1200\u002F1*eMpxxcmadBew4pDjZRzBxw.png\" alt=\"\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fa>\n\u003C\u002Ffigure>\n\u003Chr \u002F>\n\u003Ch3 id=\"when-should-you-use-web-components\">When should you use Web Components?\u003C\u002Fh3>\n\u003Cp>\n  Imagine a company that has developed a highly complex web application using React. Several hundred developers are\n  working on it full-time. They created their own internal React component library to have a robust set of ready-made UI\n  components such as buttons, inputs, dialogs, and so on. That helps to\n  \u003Ca href=\"https:\u002F\u002Fjavascript.plainenglish.io\u002Fdry-your-wet-typescript-code-e3c777b3daf9\" rel=\"noopener\">\n    minimize code duplication\n  \u003C\u002Fa>\n  within the system, which is great!\n\u003C\u002Fp>\n\u003Cp>\n  As we all know, the software industry is one of the fastest-growing and changing industries. This is accompanied by\n  many changes and innovations in Software Engineering. Assuming, next year, someone will release the ultimate frontend\n  framework, which will overshadow any existing one.\n\u003C\u002Fp>\n\u003Cp>\n  More and more developers are adopting the new framework. Over the years, companies will use the framework for new\n  projects, and some will migrate existing ones. React wouldn't be efficient anymore, and finding good React developers\n  is getting more complicated and expensive.\n\u003C\u002Fp>\n\u003Cblockquote>\n  \u003Cstrong>\n    \u003Cem>\u003Cstrong>Vendor lock-in\u003C\u002Fstrong>\u003C\u002Fem>\n  \u003C\u002Fstrong>\n  \u003Cem>\n    refers to a situation where the cost of switching to a different vendor is so high that one is essentially stuck\n    with the original vendor.\n  \u003C\u002Fem>\n\u003C\u002Fblockquote>\n\u003Cp>\n  The company in our example would be\n  \u003Cstrong>\"locked in\"\u003C\u002Fstrong>\n  to the inferior frontend library React. Switching to the new framework would be very expensive and may interrupt\n  business operations. Every single frontend component of the application would have to be migrated to the new\n  framework.\n\u003C\u002Fp>\n\u003Cblockquote class=\"kg-blockquote-alt\">\n  “Vendor lock-in is when someone is essentially forced to continue using a product or service regardless of quality” —\n  \u003Ca href=\"https:\u002F\u002Fwww.cloudflare.com\u002Flearning\u002Fcloud\u002Fwhat-is-vendor-lock-in\" rel=\"noopener ugc nofollow\">\n    cloudflare.com\n  \u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cstrong>What could the company have done to reduce the costs of vendor lock in initially?\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>\n  The use of\n  \u003Cstrong>standards\u003C\u002Fstrong>\n  makes systems more tolerant to change. As you probably have suspected: The company could have created\n  \u003Cstrong>Web Components\u003C\u002Fstrong>\n  for their UI components. Even React itself suggests the use of Web Components in its official documentation:\n\u003C\u002Fp>\n\u003Cblockquote>\n  \u003Cem>\n    Most people who use React don’t use Web Components, but you may want to, especially if you are using third-party\n    \u003Cstrong>\u003Cstrong>UI components that are written using Web Components\u003C\u002Fstrong>\u003C\u002Fstrong>\n    . —\n    \u003Ca href=\"https:\u002F\u002Freactjs.org\u002Fdocs\u002Fweb-components.html\" rel=\"noopener ugc nofollow\">https:\u002F\u002Freactjs.org\u003C\u002Fa>\n  \u003C\u002Fem>\n\u003C\u002Fblockquote>\n\u003Cp>\n  While Web Components provide strong encapsulation for reusable elements that must be shared across multiple projects,\n  React provides a declarative library that keeps the DOM in sync with your data. The two goals are complementary.\n\u003C\u002Fp>\n\u003Cblockquote class=\"kg-blockquote-alt\">\n  “As a developer, you are free to use React in your Web Components, or to use Web Components in React, or both.” —\n  \u003Ca href=\"https:\u002F\u002Freactjs.org\u002Fdocs\u002Fweb-components.html\" rel=\"noopener ugc nofollow\">reactjs.org\u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cp>\n  \u003Cstrong>You just don't need React to create a reusable button!\u003C\u002Fstrong>\n  When you plan to have multiple projects with different technology stacks in which you need to share components, go\n  ahead and build Web Components.\n\u003C\u002Fp>\n\u003Chr \u002F>\n\u003Ch3 id=\"why-should-you-learn-web-components\">Why should you learn Web Components?\u003C\u002Fh3>\n\u003Cp>\n  Escaping vendor-lock-in is one of many reasons why you should learn and use Web Components. Here are a few more\n  reasons why you should definitely have a look at Web Components:\n\u003C\u002Fp>\n\u003Ch4 id=\"web-components-are-widely-used\">Web Components are widely used.\u003C\u002Fh4>\n\u003Cp>\n  The chart below shows the percentage of page loads (in Chrome) that calls\n  \u003Ccode>customElements.define\u003C\u002Fcode>\n  at least once.\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\u002F800\u002F1*Uy7W_TELvQtahfRDTRr2Gg.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=\"nofollow noopener noopener noopener\"\n      target=\"_blank\"\n    >\n      https:\u002F\u002Fchromestatus.com\u002Fmetrics\u002Ffeature\u002Ftimeline\u002Fpopularity\u002F1689\n    \u003C\u002Fa>\n    )\n  \u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>\n  You can see that over\n  \u003Cstrong>15 %\u003C\u002Fstrong>\n  of all websites viewed in a Chrome browser register at least one\n  \u003Cstrong>\n    \u003Ca href=\"https:\u002F\u002Fmedium.com\u002F@mariusbongarts11\u002Fthe-complete-web-component-guide-part-1-custom-elements-a627af805df8\">\n      Custom Element\n    \u003C\u002Fa>\n  \u003C\u002Fstrong>\n  . Compared to that, and according to\n  \u003Ca href=\"https:\u002F\u002Fw3techs.com\u002Ftechnologies\u002Fcomparison\u002Fjs-angularjs,js-react\" rel=\"noopener\">w3techs.com\u003C\u002Fa>\n  only\n  \u003Cstrong>2.3 %\u003C\u002Fstrong>\n  of all websites use React.\n\u003C\u002Fp>\n\u003Ch4 id=\"frontend-frameworks-support-web-components\">Frontend frameworks support Web Components.\u003C\u002Fh4>\n\u003Cp>\n  Earlier in the article, we already figured out that React supports creating encapsulated and reusable Web Components.\n  Not only React but also Angular and VueJS support this idea.\n\u003C\u002Fp>\n\u003Cp>\n  Let's have a look at Angular. Angular provides the\n  \u003Ccode>@angular\u002Felements\u003C\u002Fcode>\n  package which enables developers to transform a component into a Web Component quickly.\n\u003C\u002Fp>\n\u003Cblockquote class=\"kg-blockquote-alt\">\n  \u003Cem>“Angular elements\u003C\u002Fem>\n  are Angular components packaged as\n  \u003Cem>custom elements […]\u003C\u002Fem>\n  “—\n  \u003Ca href=\"https:\u002F\u002Fangular.io\u002Fguide\u002Felements\" rel=\"noopener ugc nofollow\">angular.io\u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cp>\n  And also, VueJS supports Web Components via the\n  \u003Ccode>defineCustomElement\u003C\u002Fcode>\n  method.\n\u003C\u002Fp>\n\u003Cblockquote class=\"kg-blockquote-alt\">\n  “Vue supports creating custom elements using exactly the same Vue component APIs […] ” —\n  \u003Ca href=\"https:\u002F\u002Fv3.vuejs.org\u002Fguide\u002Fweb-components.html#passing-dom-properties\" rel=\"noopener ugc nofollow\">\n    vuejs.org\n  \u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Ch4 id=\"you-understand-what-is-going-on-under-the-hook\">You understand what is going on under the hook.\u003C\u002Fh4>\n\u003Cp>\n  As we already know, many modern frontend frameworks support the idea of Web Components. Some of them, especially\n  VueJS, are building on the foundation of web standards.\n\u003C\u002Fp>\n\u003Cp>\n  Knowing the three main technologies (\n  \u003Ca\n    href=\"https:\u002F\u002Fjavascript.plainenglish.io\u002Fthe-complete-web-component-guide-part-1-custom-elements-a627af805df8\"\n    rel=\"noopener\"\n  >\n    \u003Cstrong>Custom Elements\u003C\u002Fstrong>\n  \u003C\u002Fa>\n  ,\n  \u003Ca href=\"https:\u002F\u002Fmedium.com\u002F@mariusbongarts11\u002Fthe-complete-web-component-guide-shadow-dom-2e40921eb77\">\n    \u003Cstrong>Shadow DOM\u003C\u002Fstrong>\n  \u003C\u002Fa>\n  , and\n  \u003Ca href=\"https:\u002F\u002Fmedium.com\u002F@mariusbongarts11\u002Fthe-complete-web-component-guide-html-templates-a957f1ee43fc\">\n    \u003Cstrong>HTML Templates\u003C\u002Fstrong>\n  \u003C\u002Fa>\n  ) of Web Components will help you understand how your JavaScript framework does all the magic.\n\u003C\u002Fp>\n\u003Cp>\n  If you have worked with VueJS, you are probably familiar with the\n  \u003Ccode>scoped\u003C\u002Fcode>\n  attribute, which you can pass to a style element.\n\u003C\u002Fp>\n\u003Cpre>\u003Ccode><style scoped>\u002F* local styles *\u002F<\u002Fstyle>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\n  The\n  \u003Ccode>scoped\u003C\u002Fcode>\n  attribute will make styles of a VueJS component only apply to elements of the current component only. If you are\n  familiar with the three main technologies of Web Components, you probably already know which technology VueJS uses\n  here — the\n  \u003Ca href=\"https:\u002F\u002Fmedium.com\u002F@mariusbongarts11\u002Fthe-complete-web-component-guide-shadow-dom-2e40921eb77\">\n    \u003Cstrong>Shadow DOM\u003C\u002Fstrong>\n  \u003C\u002Fa>\n  .\n\u003C\u002Fp>\n\u003Cp>\n  “This is similar to the style encapsulation found in Shadow DOM.” —\n  \u003Ca\n    href=\"https:\u002F\u002Fvue-loader.vuejs.org\u002Fguide\u002Fscoped-css.html#mixing-local-and-global-styles\"\n    rel=\"noopener ugc nofollow\"\n  >\n    vuejs.org\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\u003Cp>\n  Shadow Trees enable us to keep the markup and style of components separate from other code on the page to prevent\n  mixing up the styling of different parts of the website. Check out this article to learn more about\n  \u003Cstrong>Shadow DOM\u003C\u002Fstrong>\n  :\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-bookmark-card\">\n  \u003Ca\n    class=\"kg-bookmark-container\"\n    href=\"https:\u002F\u002Fmedium.com\u002F@mariusbongarts11\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\u002Fmax\u002F1200\u002F1*KE5bZMF41HQnn2bupDozcQ.png\" alt=\"\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fa>\n\u003C\u002Ffigure>\n\u003Ch4 id=\"it-makes-learning-new-front-end-frameworks-easy\">It makes learning new front-end frameworks easy.\u003C\u002Fh4>\n\u003Cp>\n  Many people say that if you master one programming language, it is easy to learn any other. The same applies to\n  front-end frameworks.\n\u003C\u002Fp>\n\u003Cp>\n  During university, I have had the pleasure of learning the fundamentals of Web Components. Before that, I mainly\n  worked with Angular. Today, I have worked with all three big frameworks — React, VueJS, and Angular.\n\u003C\u002Fp>\n\u003Cp>\n  The last one I had to learn was React. Due to my experience with Web Components and the two other frameworks, it was\n  effortless for me to get started with React. Ultimately, it is always the same with a different syntax: You create\n  components. You need to pass data up or down the DOM tree. You need to render some data.\n\u003C\u002Fp>\n\u003Ch4 id=\"networking-effect\">Networking effect\u003C\u002Fh4>\n\u003Cp>\n  Chances are high that you have used some Material Design Framework. There is Angular Material for Angular, Vuetify for\n  VueJs, and Material UI for React. And of course, there are plenty more. One might be a little bit better than the\n  other. Still, each of them provides mainly the same reusable UI components like buttons, inputs, dialogs, etc. The\n  implementation is always done with the corresponding framework.\n\u003C\u002Fp>\n\u003Cp>\n  Wouldn't it be nice we could all share our web components in a single unified web? We could pick the best UI\n  components without caring about frameworks. That would make us independent from JavaScript frameworks. Using Web\n  Components would heavily reduce the costs of changing between them.\n\u003C\u002Fp>\n\u003Cp>There are already a few Web Component libraries maintained by companies like, e.g., Google and SAP:\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmaterial-components\u002Fmaterial-web\" rel=\"noopener\">\n      \u003Cstrong>Material Web Components (MWC):\u003C\u002Fstrong>\n    \u003C\u002Fa>\n    Collection of Web Components following Google's Material Design principles.\n  \u003C\u002Fli>\n  \u003Cli>\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FPolymerElements?page=3\" rel=\"noopener\">\u003Cstrong>Polymer Elements:\u003C\u002Fstrong>\u003C\u002Fa>\n    Google's Polymer library lets you build encapsulated, reusable Web Components that work like standard HTML elements\n  \u003C\u002Fli>\n  \u003Cli>\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvaadin\u002Fvaadin\" rel=\"noopener\">\u003Cstrong>Vaadin Web Components:\u003C\u002Fstrong>\u003C\u002Fa>\n    Vaadin components is an evolving set of high-quality user interface web components\n  \u003C\u002Fli>\n  \u003Cli>\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FSAP\u002Fui5-webcomponents\" rel=\"noopener\">\u003Cstrong>OpenUI5\u003C\u002Fstrong>\u003C\u002Fa>\n    \u003Cstrong>:\u003C\u002Fstrong>\n    SAP's rich set of enterprise-grade reusable UI elements driven by a lightweight framework\n  \u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\n  Unfortunately, I think those components are not as mature as for example React's Material UI. The more developers are\n  contributing to this, the better it will get.\n\u003C\u002Fp>\n\u003Ch4 id=\"learning-web-components-is-easy\">Learning Web Components is easy.\u003C\u002Fh4>\n\u003Cp>Learning Web Components is easier than you might think. They consist of three main technologies:\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>\n    \u003Ca\n      href=\"https:\u002F\u002Fjavascript.plainenglish.io\u002Fthe-complete-web-component-guide-part-1-custom-elements-a627af805df8\"\n      rel=\"noopener\"\n    >\n      \u003Cstrong>Custom elements\u003C\u002Fstrong>\n    \u003C\u002Fa>\n  \u003C\u002Fli>\n  \u003Cli>\n    \u003Ca\n      href=\"https:\u002F\u002Fmedium.com\u002F@mariusbongarts11\u002Fthe-complete-web-component-guide-html-templates-a957f1ee43fc\"\n      rel=\"noopener\"\n    >\n      \u003Cstrong>HTML templates\u003C\u002Fstrong>\n    \u003C\u002Fa>\n  \u003C\u002Fli>\n  \u003Cli>\n    \u003Ca\n      href=\"https:\u002F\u002Fmedium.com\u002F@mariusbongarts11\u002Fthe-complete-web-component-guide-shadow-dom-2e40921eb77\"\n      rel=\"noopener\"\n    >\n      \u003Cstrong>Shadow DOM\u003C\u002Fstrong>\n    \u003C\u002Fa>\n  \u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Get started by following this series of articles:\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-bookmark-card\">\n  \u003Ca\n    class=\"kg-bookmark-container\"\n    href=\"https:\u002F\u002Fjavascript.plainenglish.io\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\u002Fmax\u002F1200\u002F1*KE5bZMF41HQnn2bupDozcQ.png\" alt=\"\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fa>\n\u003C\u002Ffigure>\n\u003Cp>\n  Assuming you are using a library like\n  \u003Ca\n    href=\"https:\u002F\u002Fjavascript.plainenglish.io\u002Fbuild-your-own-blog-portfolio-with-web-components-lit-library-2701dffc735f\"\n    rel=\"noopener\"\n  >\n    Lit\n  \u003C\u002Fa>\n  or Stencil, development is not that different, let alone more complicated than using a modern JavaScript library. Have\n  a look at this series of articles to build your own Medium Blog portfolio with Web Components.\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-bookmark-card\">\n  \u003Ca\n    class=\"kg-bookmark-container\"\n    href=\"https:\u002F\u002Fjavascript.plainenglish.io\u002Fshowcase-your-medium-articles-with-web-components-part-1-basics-d2c6618e9482\"\n  >\n    \u003Cdiv class=\"kg-bookmark-content\">\n      \u003Cdiv class=\"kg-bookmark-title\">Build Your Own Blog Portfolio with Web Components: The Basics\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-description\">Part 1 — Custom elements, Shadow DOM, and HTML Templates\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\u002Fmax\u002F1200\u002F1*eMpxxcmadBew4pDjZRzBxw.png\" alt=\"\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fa>\n\u003C\u002Ffigure>\n\u003Cp>\n  It will start by using plain HTML, CSS, and JavaScript. After that, it will use the\n  \u003Ca\n    href=\"https:\u002F\u002Fjavascript.plainenglish.io\u002Fbuild-your-own-blog-portfolio-with-web-components-lit-library-2701dffc735f\"\n    rel=\"noopener\"\n  >\n    Lit\n  \u003C\u002Fa>\n  library to make development easier.\n\u003C\u002Fp>\n\u003Chr \u002F>\n\u003Ch3 id=\"final-thoughts\">Final Thoughts\u003C\u002Fh3>\n\u003Cp>\n  Web Components will not replace frontend frameworks in the near future. Nevertheless, they can enhance those\n  frameworks by replacing their component layer with a native and uniform solution.\n\u003C\u002Fp>\n\u003Cp>\n  I hope you enjoyed reading this article, and maybe I could inspire you to learn Web Components. I am always happy to\n  answer questions, and I am open to criticism. Feel free to contact me at any time 😊\n\u003C\u002Fp>\n\u003Cp>\n  If you are interested,\n  \u003Ca href=\"https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Ftag\u002Fweb-components\u002F\">here are more articles about Web Components\u003C\u002Fa>\n  .\n\u003C\u002Fp>\n\u003Cp>\n  Get in touch with me via\n  \u003Cstrong>\u003C\u002Fstrong>\n  \u003Ca\n    href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fmarius-bongarts-6b3638171\u002F\"\n    rel=\"noopener ugc nofollow noopener noopener noopener noopener\"\n  >\n    \u003Cstrong>LinkedIn\u003C\u002Fstrong>\n  \u003C\u002Fa>\n  \u003Cstrong>\u003C\u002Fstrong>\n  or follow me on\n  \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002FMariusBongarts\" rel=\"noopener ugc nofollow noopener noopener noopener noopener\">\n    \u003Cstrong>Twitter\u003C\u002Fstrong>\n  \u003C\u002Fa>\n  .\n\u003C\u002Fp>\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",1753,[38,75,91],{"id":39,"slug":40,"title":41,"description":42,"url":43,"publishedAt":44,"createdAt":45,"updatedAt":46,"featured":19,"readingTime":47,"tags":48,"imageUrl":53,"imageAlt":54,"faviconUrl":55,"publishedAtString":44,"category":56,"readTimeString":74},"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,[49,50,51,52],"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",[57,67],{"type":58,"title":59,"shortTitle":60,"icon":61,"description":62,"excerpt":63,"thumbnail":64},"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":65,"alt":66},"https:\u002F\u002Fweb-highlights.com\u002Fimages\u002Fme.png","Me, Marius Bongarts, in front of sea in Portugal, Algarve",{"type":68,"title":69,"shortTitle":70,"icon":71,"description":72,"excerpt":73},"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":76,"slug":77,"title":78,"description":79,"url":80,"publishedAt":81,"createdAt":82,"updatedAt":81,"featured":19,"readingTime":47,"tags":83,"imageUrl":85,"imageAlt":86,"faviconUrl":55,"publishedAtString":81,"category":87,"readTimeString":74},"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",[26,84],"SEO","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fcontent\u002Fimages\u002F2024\u002F10\u002F0_dkKw8Q1T3dUhNBo7.jpg","Lake with mountains in background",[88,90],{"type":58,"title":59,"shortTitle":60,"icon":61,"description":62,"excerpt":63,"thumbnail":89},{"url":65,"alt":66},{"type":68,"title":69,"shortTitle":70,"icon":71,"description":72,"excerpt":73},{"id":92,"slug":93,"title":94,"description":95,"url":96,"publishedAt":97,"createdAt":98,"updatedAt":99,"featured":19,"readingTime":100,"tags":101,"imageUrl":103,"imageAlt":104,"faviconUrl":55,"publishedAtString":97,"category":105,"readTimeString":108},"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,[60,102,50,51],"Story","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fcontent\u002Fimages\u002F2024\u002F09\u002F0_JjFAqJ78cyJMViqZ.webp","Tall Bamboo Tree",[106],{"type":58,"title":59,"shortTitle":60,"icon":61,"description":62,"excerpt":63,"thumbnail":107},{"url":65,"alt":66},"7 min read"]