liferay-custom-elements

What problem does it solve?

Embedding standalone React (or any framework) frontend widgets into Liferay pages while preserving lifecycle management, styling isolation choices, authenticated portal integration, and safe bundling for portal deployment.

Core Features & Use Cases

• Web Component wrapper: Guide to wrap a React app as an HTMLElement, mount a React root in connectedCallback, and unmount in disconnectedCallback to avoid memory leaks.
• CSS isolation options: When to use Shadow DOM for strict isolation and when to rely on portal CSS inheritance for Clay UI compatibility.
• Build and deployment: Vite and rollup output configuration, client-extension.yaml properties mapping, and ESM-friendly bundling for Liferay Client Extensions.
• Portal integration: Using Liferay global APIs for auth tokens, secure fetches, and detaching event listeners; using MemoryRouter to avoid altering the browser URL.
• Dev ergonomics: Local liferay stub for development and anti-patterns to avoid duplicate registration and missing cleanup.

Quick Start

Create a React app wrapped as a custom element named my-widget, guard customElements.define to prevent duplicates, unmount the React root in disconnectedCallback, configure client-extension.yaml properties, and set Vite build output for ESM deployment.