--- title: HTML Web Components Make Progressive Enhancement and CSS... description: HTML Web Components facilitate progressive enhancement and CSS encapsulation, allowing for modular, reusable elements without relying solely on JavaScript.... canonical: https://daily.dev/posts/html-web-components-make-progressive-enhancement-and-css-encapsulation-easier--f3wew42a9 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: HTML Web Components Make Progressive Enhancement and CSS Encapsulation Easier! | daily.dev og:description: HTML Web Components facilitate progressive enhancement and CSS encapsulation, allowing for modular, reusable elements without relying solely on JavaScript.... og:url: https://daily.dev/posts/html-web-components-make-progressive-enhancement-and-css-encapsulation-easier--f3wew42a9 og:image: https://api.daily.dev/og/posts/f3wEw42A9.png og:image:alt: HTML Web Components Make Progressive Enhancement and CSS Encapsulation Easier! og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # HTML Web Components Make Progressive Enhancement and CSS Encapsulation Easier! **[CSS-Tricks](https://daily.dev/sources/css_tricks)** · 12 min read · 30 upvotes · 3 comments ## Summary HTML Web Components facilitate progressive enhancement and CSS encapsulation, allowing for modular, reusable elements without relying solely on JavaScript. They provide custom elements, encapsulate styles, and support accessibility features, ensuring components function with or without JavaScript. Examples include a disclosure pattern, tabbed components, and an AJAX loader, demonstrating how components can be enhanced progressively using both light and Shadow DOM. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@michaelbarsinai** · 3 upvotes > Web components are too often overlooked. Since they are oart if the web standards, we should prefer them to framework-based components whenever possible. **@felipe19** · 0 upvotes > The thing is, all of web component use has to be CSR(client side rendering), cause all depends of first load of javascript each time a page is rendered. So it is just for CSR projects nothing else. Theres some SSR stuff but the component has to be written manually in each page it has to be used, so no linked separete-file-component to update it in one place. I can use fetch to achieve that, but again, is using CSR javascript to use it. So Web Components are not ready as of now for SSR or other websites needs and isnt SEO friendly(some assume that CSR now is friendly with seo cause google can... --- Tags: [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript), [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html), [#frontend](https://daily.dev/tags/frontend) [View this post on daily.dev](https://daily.dev/posts/html-web-components-make-progressive-enhancement-and-css-encapsulation-easier--f3wew42a9) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"HTML Web Components Make Progressive Enhancement and CSS Encapsulation Easier!","url":"https://daily.dev/posts/html-web-components-make-progressive-enhancement-and-css-encapsulation-easier--f3wew42a9","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/html-web-components-make-progressive-enhancement-and-css-encapsulation-easier--f3wew42a9"},"datePublished":"2024-08-01T13:25:37.497Z","dateModified":"2024-10-05T18:22:37.625Z","description":"HTML Web Components facilitate progressive enhancement and CSS encapsulation, allowing for modular, reusable elements without relying solely on JavaScript....","image":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/07/webui-tabs.png?resize=1024%2C533&ssl=1","thumbnailUrl":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/07/webui-tabs.png?resize=1024%2C533&ssl=1","isAccessibleForFree":true,"articleSection":"CSS-Tricks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"CSS-Tricks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks","url":"https://daily.dev/sources/css_tricks"},"commentCount":3,"discussionUrl":"https://daily.dev/posts/html-web-components-make-progressive-enhancement-and-css-encapsulation-easier--f3wew42a9","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":30},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":3}],"keywords":"webdev,javascript,css,html,frontend","timeRequired":"PT12M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"CSS-Tricks","item":"https://daily.dev/sources/css_tricks"},{"@type":"ListItem","position":3,"name":"HTML Web Components Make Progressive Enhancement and CSS Encapsulation Easier!"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/html-web-components-make-progressive-enhancement-and-css-encapsulation-easier--f3wew42a9","comment":[{"@type":"Comment","text":"Web components are too often overlooked. Since they are oart if the web standards, we should prefer them to framework-based components whenever possible.","datePublished":"2024-08-02T06:38:52.307Z","url":"https://daily.dev/posts/f3wEw42A9#c-liJSejeFd","author":{"@type":"Person","name":"Michael Bar-Sinai","url":"https://daily.dev/michaelbarsinai","image":"https://avatars.githubusercontent.com/u/1938468?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"The thing is, all of web component use has to be CSR(client side rendering), cause all depends of first load of javascript each time a page is rendered. So it is just for CSR projects nothing else. Theres some SSR stuff but the component has to be written manually in each page it has to be used, so no linked separete-file-component to update it in one place. I can use fetch to achieve that, but again, is using CSR javascript to use it. So Web Components are not ready as of now for SSR or other websites needs and isnt SEO friendly(some assume that CSR now is friendly with seo cause google can crawl it, but the truth is SSR, and better: SSG, are prefferred for google).","datePublished":"2024-09-25T18:53:28.169Z","url":"https://daily.dev/posts/f3wEw42A9#c-0ACPodO3j","author":{"@type":"Person","name":"Felipe","url":"https://daily.dev/felipe19","image":"https://lh3.googleusercontent.com/a/AAcHTtdKPXEK21c-9FLkmDH-bpt9X_HysFH1N9Gd5X_1cM6s4Ro=s96-c"}}]} ```