# Web Components Web Components is a suite of web technologies for creating reusable custom elements with encapsulated functionality for web applications. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Bringing the real world to your AI application using Firebase AI Logic DevFeed: [Bringing the real world to your AI application using Firebase AI Logic]() Original publisher: [Read original article]() Author: Ankita Saxena; Ken Nevarez Published: 2026-05-19T00:00:00Z Content type: tutorial Language: en Sources: [Firebase Blog]() Topics: [Firebase](), [Artificial Intelligence](), [Google Maps](), [Generative AI](), [Large Language Model](), [JavaScript](), [Web Components](), [API](), [Mobile]() Tags: [ai](), [ai-logic](), [api](), [firebase](), [firebase-ai-logic](), [gemini](), [generative-ai](), [google-maps](), [hallucinations](), [javascript](), [tutorials](), [web]() ### AI overview Firebase introduces Grounding with Google Maps in the Firebase AI Logic SDK to help mobile and web applications produce location-aware responses based on real-world geospatial data. The article explains configuring the model, plotting places with Google Maps Web Components, and using grounding metadata for citations and coordinates. ### Source excerpt News, tutorials, and updates from the Firebase team. ## How CodeTV built a video streaming platform with Astro and Mux DevFeed: [How CodeTV built a video streaming platform with Astro and Mux]() Original publisher: [Read original article]() Published: 2025-09-09T00:00:00Z Content type: article Language: en Sources: [The Astro Blog]() Topics: [Astro](), [Streaming](), [Website](), [Framework](), [data-architecture](), [Web Components](), [Content Management System](), [workflow automation]() Tags: [architecture](), [astro](), [authentication](), [automation](), [cms](), [developers](), [performance](), [streaming](), [web]() ### AI overview This case study explains how CodeTV used Astro and Mux to build a subscription-based video streaming platform for developer programming. It describes the platform's requirements, including content management, authentication, e-commerce, asset management, search, workflow automation, and adaptive-bitrate video streaming. ### Source excerpt How CodeTV built a video streaming platform with Astro and Mux ## Launching MDN's new front end DevFeed: [Launching MDN's new front end]() Original publisher: [Read original article]() Author: mdn-team Published: 2025-08-19T00:00:00Z Content type: article Language: en Sources: [MDN Blog]() Topics: [Front end](), [Web Development](), [Web platform](), [Web Components](), [CSS](), [Web APIs](), [HTML](), [User interface design](), [Usability](), [Library]() Tags: [article](), [code](), [components](), [css](), [developers](), [front-end](), [github](), [library](), [ui](), [usability](), [web](), [web-apis]() ### AI overview MDN has launched a rebuilt front end with a cleaner interface, improved usability, and support for modern CSS and web components. The update also improves typography, code rendering, search, icons, and navigation. ### Source excerpt MDN is getting a facelift πŸŽ‰. Discover what's changed, what's improved, and how navigating the site just got smoother. ## Using Rails Views, Web Components, React, and Rails ViewComponents Together DevFeed: [Using Rails Views, Web Components, React, and Rails ViewComponents Together]() Original publisher: [Read original article]() Published: 2025-03-03T00:00:00Z Content type: opinion Language: en Sources: [Aha! Engineering Blog]() Topics: [Rails](), [React](), [Web Components](), [Server-side rendering](), [Front end](), [vendor lock-in]() Tags: [components](), [front-end](), [opinion](), [rails](), [react](), [server-side-rendering](), [vendor-lock-in]() ### AI overview The article argues that Rails views, web components, React, and Rails ViewComponents are not mutually exclusive. It explains that each approach addresses different problems and can be combined thoughtfully, including server rendering for simpler data-display features and web components for avoiding vendor lock-in. ### Source excerpt How many times have you heard or read statements like these in tech discussions?"Everything needs to be a single-page app these days. Server-rendered templates are holding you back.""Web components are the future. Why tie yourself to any framework?" ## Bringing Signals to Lit Labs DevFeed: [Bringing Signals to Lit Labs]() Original publisher: [Read original article]() Author: Lit Team Published: 2024-10-08T00:00:00Z Content type: release Language: en Sources: [Lit Blog]() Topics: [JavaScript](), [reactive](), [Web Components](), [interoperability](), [polyfill]() Tags: [compatibility](), [components](), [interoperability](), [javascript](), [polyfill](), [reactive]() ### AI overview Lit Labs announced @lit-labs/signals, a package that integrates the polyfill for the TC39 Signals proposal with Lit. It enables shared observable signals for reactive state management, automatic component updates, targeted re-renders, and interoperability across libraries and frameworks. ### Source excerpt The new Signals package integrates the TC39 Signals proposal with Lit ## πŸ”₯ NextConf / Next 14, Lit 3.0, New gsap website DevFeed: [πŸ”₯ NextConf / Next 14, Lit 3.0, New gsap website]() Original publisher: [Read original article]() Author: Mads Brodt Published: 2023-11-01T16:00:00Z Content type: article Language: en Sources: [Front-End Focus]() Topics: [Next.js](), [Web Components](), [Web Development](), [React](), [GSAP animation]() Tags: [gsap](), [javascript](), [next](), [react]() ### AI overview This newsletter roundup discusses NextConf and Next 14, including stable Server Actions, Turbopack improvements, and a new learning course. It also covers the Lit 3.0 release and Web Components, then highlights a new GSAP website. ### Source excerpt Hey there! ## Lit Launch Day: Lit 3.0, Labs graduations, a compiler and more! DevFeed: [Lit Launch Day: Lit 3.0, Labs graduations, a compiler and more!]() Original publisher: [Read original article]() Author: Lit Team Published: 2023-10-10T00:00:00Z Content type: release Language: en Sources: [Lit Blog]() Topics: [Web Components](), [releases](), [Web]() Tags: [announcements](), [launch](), [release](), [upgrade](), [web]() ### AI overview The Lit team announces the final release of Lit 3.0, along with Lit Labs graduations and other related releases. Lit 3.0 drops IE11 support, publishes npm modules as ES2021, removes APIs deprecated in Lit 2.0, moves SSR hydration support modules, and unifies decorator behavior. ### Source excerpt We're launching the next major version of Lit ## Announcing Lit 3.0 Pre-releases DevFeed: [Announcing Lit 3.0 Pre-releases]() Original publisher: [Read original article]() Author: Justin Fagnani Published: 2023-05-15T00:00:00Z Content type: release Language: en Sources: [Lit Blog]() Topics: [releases](), [Web Components](), [Web](), [npm](), [toolchains](), [interoperability](), [Server-side rendering]() Tags: [browser](), [compatibility](), [interoperability](), [npm](), [packages](), [pre-release](), [release](), [releases](), [ssr](), [testing](), [toolchains](), [tooling](), [upgrade]() ### AI overview The Lit team announces the first Lit 3.0 pre-releases. This major version introduces a small set of breaking changes focused on browser support, deprecated APIs, package publishing, and SSR hydration modules, while adding no new features. Lit 2.x users without deprecation warnings should generally have a seamless upgrade, although some may need newer tooling because Lit's npm modules are now published as ES2021. ### Source excerpt Get an early look at the upcoming Lit 3.0 release. ## How Pinterest's design systems team measures adoption DevFeed: [How Pinterest's design systems team measures adoption]() Original publisher: [Read original article]() Author: Ravi Lingineni Published: 2023-02-03T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [dashboards](), [REST API](), [Web Components](), [Product Management]() Tags: [component](), [design-systems](), [figma](), [product-management](), [rest-api](), [web]() ### AI overview Pinterest's Gestalt design systems team created FigStats using Figma's REST API to measure design-system adoption and visualize component usage. The article explains why adoption metrics help teams assess impact, identify usage patterns, and understand whether components are reaching products across Pinterest. ### Source excerpt The Gestalt team tells us how they used Figma's REST API to create FigStats, a dashboard for visualizing component usage. ## CSS blocky people making waves DevFeed: [CSS blocky people making waves]() Original publisher: [Read original article]() Author: Stanko Published: 2022-11-10T00:00:00Z Content type: tutorial Language: en Sources: [Stanko TadiΔ‡]() Topics: [CSS](), [Web Components](), [HTML](), [Web Development]() Tags: [animate](), [code](), [components](), [css](), [element](), [html]() ### AI overview A tutorial on creating blocky people performing a stadium wave using only CSS. It explains how to build 3D boxes from HTML elements and CSS, then use Web Components templates to reduce the repeated HTML needed for each person. ### Source excerpt It all started with the code challenge in our office. The weekly theme was waves, and I tried to think outside of the box. After dropping a few ideas, I remembered the waves people do on stadiumsAccording to Wikipedia these are known as Mexican or stadium waves. So I made waves using CSS only (code is available on CodePen): I started without a real idea on how to do it. Obviously, I needed to create some people and animate them. 3D people would be nice, but as this was a weekly code challenge, I had to keep it simple. Blocky people, similar to characters in Minecraft, seemed like a good idea. Making them using Three.js felt too obvious, as I wanted something a little bit more unconventional and fun. CSS was definitely not made for something like this, which is why I wanted to try it out. Box # Blocky people are obviously made of blocks, so I needed to build some 3D boxes in CSS. There are many tutorials on creating a 3D box in CSS, so I'll try to keep this short. We'll need six elements to use as sides of the box. Each side needs to be appropriately sized, rotated and translated into its place.
Show HTMLHide HTML Here you can see the three steps in creating a CSS box: Size the sides appropriately Translate them into position Rotate them The box wrapper element is outlined in red and sides are outlined in blue. If you want to play with it, I created a standalone CodePen. As a bonus, here is a three-sided prism as well. WebComponents # Each box consists of seven HTML elements (a wrapper and six sides). And each person ended up being built from twelve boxes and some additional wrappers. That means that each person requires a lot of HTML to be written. To simplify things, we can use WebComponents. Web components are a pretty powerful tool, but in this case, we will only use their template capabi ## I redesigned my site DevFeed: [I redesigned my site]() Original publisher: [Read original article]() Author: Monica Dinculescu Published: 2021-06-24T00:00:00Z Content type: opinion Language: en Sources: [Monica Dinculescu]() Topics: [Website](), [generative art](), [Web Components](), [HTML](), [JavaScript](), [Jekyll](), [GitHub Pages]() Tags: [components](), [generative-art](), [github-pages](), [html](), [ibm](), [javascript](), [jekyll]() ### AI overview The author explains why they redesigned their personal website: they were publishing fewer blog posts, wanted to showcase generative art, and replaced an outdated emoji custom element with a simpler implementation. The site continues to use Jekyll through GitHub Pages without a build step or minification. ### Source excerpt The last time I changed something big on my site was 3+ years ago. I was really into gradient rainbow text and IBM Plex Mono. It was a mild increment over whatever I had before, which was just a cleaned up and colourful version of Left from like 6 years prior. Anyway, what I'm saying is: this website had hella split ends. Here's the before and after: ↓ But also, why? I used to write a lot of blog posts, so my website was very blog focused. Originally the home page was just a listing of posts with some copy sprinkled in. As the pandemic hit, I started writing fewer and fewer posts, so having the one post of 2020 show up as a listing was ridiculous. On top of that, this year I started focusing a lot more on making generative art and I thought it was sad I wasn't showing that anywhere on the site! The beauty of generative art is that you can just keep generating it over and over again, and my site was a long white column of text. No more! git diff Ok so hear me out, this looks bad and that's because: it is bad. One cute thing my old site had was a custom element. You pressed it and got a rain of emoji. Brilliant. The problem is that I wrote that in like 2017, and used the well deceased v0 version of the web components spec. As a result, it had a gazillion dependencies (rip bower_components) and polyfills and ancient trash. 23906 lines of trash to be exact. Gooood riddance. The added 1580 lines are a bit of a bore: 100 of these are this post. another 300 is the HTML Ipsum from CSS tricks because I'm always scared I'm going to break a style on some ancient post. 300 lines of JavaScript for the header art that I don't minify because I'd like to be able to read this in the future to fix whatever mistakes past Monica made, and I don't have a build step set up. I'm still using the Jekyll that comes out of the box with GitHub pages and I am never looking back. the rest is actual code that I touched! There was some really horrifying markup on the project/talks/tem ## Lit 2.0: Meet Lit, all over again! DevFeed: [Lit 2.0: Meet Lit, all over again!]() Original publisher: [Read original article]() Author: Gray Norton Published: 2021-04-21T00:00:00Z Content type: release Language: en Sources: [Lit Blog]() Topics: [Web Components](), [Server-side rendering](), [Streaming](), [reactive](), [Next.js](), [Eleventy](), [Frameworks]() Tags: [components](), [html](), [next-js](), [performance](), [popular](), [release](), [streaming]() ### AI overview The article announces the first release candidate of Lit 2.0, describing it as smaller, more capable, faster, and prepared for server-side rendering. It highlights reduced bundle sizes, new templating features, reactive controllers, rendering performance improvements, streaming SSR, client-side hydration, and compatibility with most existing Lit code. ### Source excerpt New name, new site, new version: smaller, better, faster, and SSR-ready. ## What's new in Svelte: March 2021 DevFeed: [What's new in Svelte: March 2021]() Original publisher: [Read original article]() Author: Dani Sandoval Published: 2021-03-01T00:00:00Z Content type: news Language: en Sources: [Svelte blog]() Topics: [Svelte](), [releases](), [Server-side rendering](), [TypeScript](), [Web Components](), [ESLint](), [Prettier](), [Visual Studio Code](), [CSS]() Tags: [components](), [eslint](), [releases](), [ssr](), [svelte](), [tools](), [typescript](), [vscode]() ### AI overview A March 2021 update covering releases across the Svelte ecosystem, including Svelte core, language tools, plugins, preprocessors, and Sapper. It highlights improvements to SSR stores, actions, compiler namespaces and CSS scoping, TypeScript definitions, editor tooling, parsing, and related ecosystem packages. ### Source excerpt Lots to cover this month with releases from across the Svelte ecosystem. Most importantly, Svelte Summit Spring 2021 has an Open Call for Speakers. The deadline is March 14 so if you have an idea for a talk, submit it now! Let's dive into the news 🐬 What's new in sveltejs/svelte SSR store handling has been reworked to subscribe and unsubscribe as in DOM mode. SSR stores should work much more consistently now (3.31.2, see custom stores and Server-side component API ) Multiple instances of the same action are now allowed on an element (3.32.0, example) The new foreign namespace should make it easier for alternative compile targets (like Svelte Native and SvelteGUI) by disabling certain HTML5-specific behaviour and checks (3.32.0, more info) Support for inline comment sourcemaps in code from preprocessors (3.32.0) Destructured defaults are now allowed to refer to other variables (3.33.0, example) Custom elements will now call onMount functions when connecting and clean up when disconnecting (3.33.0, checkout this PR for an interesting conversation on how folks are using Svelte with Web Components) A cssHash option has been added to the compiler options to control the classname used for CSS scoping (3.34.0, docs) Continued improvement to TypeScript definitions For a complete list of changes, including bug fixes and links to PRs, check out the CHANGELOG New from sveltejs/language-tools For language server clients that don't support didChangeWatchedFiles, a fallback file watcher will be used instead New highlighting rules for store accessors and element directives (like bind: and class:) HTML tags can now be renamed together Mustache tags parsing is now more robust and will provide better intellisense in more situations Haven't tried the language-tools yet? Check out Svelte Extension for VSCode or find a plugin for your favorite IDE! Other changes from sveltejs/* eslint-plugin-svelte3 now supports TypeScript as of 3.1.0 prettier-plugin-svelte released a number of minor ve ## What's new in Svelte: December 2020 DevFeed: [What's new in Svelte: December 2020]() Original publisher: [Read original article]() Author: Dani Sandoval Published: 2020-12-01T00:00:00Z Content type: release Language: en Sources: [Svelte blog]() Topics: [Svelte](), [TypeScript](), [Web Components](), [npm](), [Web Development]() Tags: [components](), [new-features](), [npm](), [ssr](), [svelte](), [svg](), [typescript](), [updates]() ### AI overview Svelte's December 2020 update covers new component features, lifecycle support, stronger TypeScript typing, transition fixes, and an npm export map. It also reports updates to rollup-plugin-svelte and Sapper, discusses SvelteKit, and showcases community projects built with Svelte. ### Source excerpt It's the last "What's new in Svelte" of the year and there's lots to celebrate! This month's coverage includes updates from rollup-plugin-svelte, Sapper and SvelteKit and a bunch of showcases from the Svelte community! New features & impactful bug fixes $$props, $$restProps, and $$slots are all now supported in custom web components (3.29.5, Example) and slot components now support spread props: (3.30.0) A new hasContext lifecycle function makes it easy to check whether a key has been set in the context of a parent component (3.30.0 & 3.30.1, Docs) There is now a new SvelteComponentTyped class which makes it easier to add strongly typed components that extend base Svelte components. Component library and framework authors rejoice! An example: export class YourComponent extends SvelteComponentTyped<{aProp: boolean}, {click: MouseEvent}, {default: {aSlot: string}}> {} (3.31.0, RFC) Transitions within {:else} blocks should now complete successfully (3.29.5, Example) Svelte now includes an export map, which explicitly states which files can be imported from its npm package (3.29.5 with some fixes in 3.29.6, 3.29.7 and 3.30.0) rollup-plugin-svelte had a new 7.0.0 release. The biggest change is that the css option was removed. Users who were using that option should add another plugin like rollup-plugin-css-only as demonstrated in the template What's going on in Sapper? Lots of new TypeScript definition improvements to make editing Sapper apps even easier! CSS for dynamic imports also should now work in client.js files. (Unreleased) What's the deal with SvelteKit? We're glad you asked! If you didn't catch Rich's blog post from early last month, you can find it here! For all the features and bugfixes see the CHANGELOGs for Svelte and Sapper. Community ShowcaseApps & Sites narration.studio (Chrome Only) is an automatic in-browser audio recording & editing platform for voice over narration. Vippet is a video recording and editing tool for the browser. Patte ## Manipulating Screen Brightness on iOS and Android with Ionic React DevFeed: [Manipulating Screen Brightness on iOS and Android with Ionic React]() Original publisher: [Read original article]() Author: Alejandra Del Valle Published: 2020-08-20T19:06:20Z Content type: tutorial Language: en Sources: [RBI Tech]() Topics: [Ionic](), [React](), [React Hooks](), [Android](), [iOS](), [PWA](), [Web Components](), [Development]() Tags: [android](), [components](), [development](), [how-to](), [ionic](), [ios](), [mobile-app-development](), [pwa](), [react](), [react-hooks]() ### AI overview This tutorial discusses controlling screen brightness on iOS and Android using Ionic React and Ionic React Hooks, including the package's Capacitor API wrappers and support for shared-codebase applications across mobile, desktop, and PWA targets. ### Source excerpt Manipulating Screen Brightness on iOS and Android Devices Undoubtedly one of the most annoying side effects our phones have is its ability to change screen brightness dynamically. Whether it's a setting enabled on your device to automatically adjust brightness based on your environment, or an app you downloaded manipulates it based on its needs, sometimes it's just out of your control. Maybe you're an avid digital content creator and having your screen brightness at its max is to help your content be "pixel-perfect" and edited just the way you want. Maybe you're visiting a store and need to scan your screen to quickly and easily pay for something without fumbling through your wallet or purse. Or, maybe you're at a show or at home for a movie night and having your screen brightness as low as possible is important to one, not blind you, and two, not blind your neighbors. Whatever the backstory, it's important for the apps we use to consider how we use our phones in our day-to-day lives to create a seamless experience that users will enjoy. Let's look at how we can help with this experience in native development using Ionic React with Ionic React Hooks (recently renamed to React Hooks for Capacitor). Keep reading if you have basic experience with React and React Hooks. If not, I would suggest getting familiar with React and then hop back on over! Why Ionic React? Short answer? Ionic React is ultimately just... React. Music to my ears. Ionic React is also built using web components, making it compatible with a multitude of web libraries and supports iOS, Android, Desktop, and PWA (i.e. progressive web apps) all by using one shared codebase (I'm hearing music again...). Ionic React Hooks Re-introduced Ionic announced their launch of Ionic React Hooks back in December of 2019. It has recently been renamed and moved to the Capacitor Community org -- @capacitor-community/react-hooks. This package provides a collection of wrappers around Capacitor APIs along with a few other Ioni ## Eschewing Shadow DOM DevFeed: [Eschewing Shadow DOM]() Original publisher: [Read original article]() Author: Heydon Pickering Published: 2019-06-14T00:00:00Z Content type: article Language: en Sources: [The Every Layout Blog]() Topics: [Web Components](), [CSS](), [modern web development](), [React](), [styled-components]() Tags: [css](), [custom](), [element](), [react](), [styled-components]() ### AI overview An examination of styling problems encountered with Shadow DOM, including inconsistent universal styles, limited inheritance, slot restrictions, and specificity issues. The author proposes an experimental alternative for web components that namespaces and embeds prop-derived instance styles in the document head. ### Source excerpt Regarding styling, Shadow DOM is really good at one thing: preventing per-component styles from leaking out and affecting other parts of the document. Unfortunately, Shadow DOM also has a very opinionated way of preventing styles being applied from the parent document. Here is a roundup of the quirks and associated issues I've encountered: Shadow DOM styling issues Universal styles Some universal styles (using the * selector) are applied, and others are not. The color property appears to pierce shadow boundaries, but I've had no luck with box-sizing. Having to set box-sizing: border-box for each component is redundant. Inheritance Document styles are inherited in Shadow DOM. But inheritance only gets you so far, especially since not all properties are inheritable by default anyway. I've tried hacking things together with the explicit inherit keyword, but that seems to have no effect. Using the following is no good, because it forces every node to inherit every property from the parent. If had display: flex applied, every one of the component's descendants would adopt it. * { all: inherit; /* yikes */ } Slot restrictions For performance reasons, the ::slotted() selector, which allows you to style the Light DOM content of your component from within your Shadow DOM, only lets you affect child elements and not descendants at depth. This is a bit restrictive. Worse, you cannot seem to use sibling combinators like + or ~. None of the following works: ::slotted(*) + * /* Nope */ ::slotted(* + *) /* Nope */ ::slotted(*) + ::slotted(*) /* Nope */ Specificity In making layout components, I like to take a progressive approach: style the component and its Light DOM nodes in my document stylesheet, then enhance with instance-specific styles via props (attributes) in Shadow DOM. For a component instance that looks like this... ...I would apply the itemWidth value in the Shadow DOM using interpolation: ` Defining a behaviour Docs: behaviours. Defining a behavior to share implementation between different elements: Using the behavior in an element: Lifecycle methods Docs: lifecycle callbacks. Polymer({ registered: function() {}, created: function() {}, ready: function() {}, attached: function() {}, detached: function() {} }); There's an attributeChanged callback as well, but that's very rarely used. Data binding Docs: data binding, attribute binding, binding to array items, computed bindings. Don't forget: Polymer camel-c ## Google AMP: Should You Care? DevFeed: [Google AMP: Should You Care?]() Original publisher: [Read original article]() Author: andrew@nystudio107.com (Andrew Welch) Published: 2016-12-02T09:16:00Z Content type: tutorial Language: en Sources: [nystudio107 | Articles on modern web development.]() Topics: [Google](), [Mobile](), [Content Management System](), [Latency](), [Web Components](), [Web]() Tags: [accelerated](), [cms](), [craft](), [css](), [google](), [google-s](), [here-s](), [how-to](), [html](), [implement](), [initiative](), [insights](), [internet](), [latency](), [mobile](), [pages](), [performance](), [primer](), [project]() ### AI overview This primer explains Google AMP, its focus on improving mobile web performance, and its restrictions on external CSS, JavaScript, and certain HTML. It also describes how AMP uses web components and relates to Google PageSpeed Insights recommendations. ### Source excerpt AMP is Google's Accelerated Mobile Pages initiative. Here's a primer, and how to implement AMP with Craft CMS ## Advanced Embedding with Square Market DevFeed: [Advanced Embedding with Square Market]() Original publisher: [Read original article]() Author: Square Engineering Published: 2014-07-09T16:07:00Z Content type: tutorial Language: en Sources: [Square Corner Blog RSS Feed]() Topics: [Website](), [Web Components](), [HTML](), [browsers]() Tags: [browsers](), [components](), [embedded](), [engineering](), [html](), [self-service](), [shopping](), [widget]() ### AI overview Square Market describes how it developed an embeddable interactive menu for business websites. The article compares injecting HTML, using a web component, and using an iframe, ultimately choosing an iframe because browser support for web components was considered insufficient. ### Source excerpt Ember an interactive menu into your website using Square Market. [Next page]()