Web Components bookmarks

3 Approaches to Integrate React with Custom Elements

Integrating Web Components to a React application with a (nearly) seamless developer experience.

A deep analysis into isomorphic, autonomous cross-framework usage

Overview of in-depth problems of the connection of Frameworks, their SSR and Web Components.

Angular Elements: Web Components with Standalone Components

Exposing a standalone component as web component using Angular 14.2.

Building Interoperable Web Components That Even Work With React

Web components particularly excel as leaf components: the last thing to be rendered in a component tree.

Data Sharing & Framework Integration

How Web Components can share data, and which role frameworks play.

Frankenstein Migration: Framework-Agnostic Approach (Part 1)

A new, framework-agnostic approach to the process of migration to pretty much any framework of your choice.

Frankenstein Migration: Framework-Agnostic Approach (Part 2)

Putting all the theory to the test by performing step-by-step migration of a simple to-do application.

How to build lazy loaded custom elements with Svelte

Compiling the Svelte component as a custom element and setting up lazy loading for better performance.

How to run Svelte custom elements in dev mode

About the Hot Module Replacement (HMR) issue related to using custom elements, and how to prevent it.

Master Web Component Forms Integration – with Lit and Angular

About some pitfalls to consider when using web components in forms.

Nuxt Custom Elements

Export your existing project components as custom elements with shadow DOM for integration into external pages.

React Shadow

Utilize Shadow DOM in React with all the benefits of native style encapsulation. Supports React 16.8 or later.

Remount

Mount React components to the DOM using Custom Elements to use anywhere in your HTML. React 18 is required.

Svelte Components as Web Components

How to write an app in Svelte Kit, while being able to export and use individual components on other websites.

Using Custom Elements in Svelte

Svelte fully supports custom elements. However, there are still a few quirks you need to watch out for.

Using Web Components in Angular

Angular Elements is one of the most mature Web Components libraries.

Using Web Components With Next (or Any SSR Framework)

One serious shortcoming of Web Components is their current lack of support for server-side rendering.

Vue Components as Custom Elements

Now that Vue 3.2 has been released, creating native custom elements from Vue components is easier than ever.