skills.rest
JoaoPedroAmaral
JoaoPedroAmaralCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

liferay-custom-elements

Embed React apps as LIFERAY custom elements with lifecycle management.

Updated Aug 27, 2026
Search Tags:#react#vite#web components#custom elements#shadow dom#liferay#client extension
One-click install
npx skills add https://github.com/JoaoPedroAmaral/backBarbearia --skill liferay-custom-elements
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: liferay-custom-elements
Source: https://github.com/JoaoPedroAmaral/backBarbearia/tree/main/.claude/skills/liferay-custom-elements
Command: npx skills add https://github.com/JoaoPedroAmaral/backBarbearia --skill liferay-custom-elements

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about liferay-custom-elements

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I wrap a React app as a Liferay custom element for Client Extensions?▼

To wrap a React app as a Liferay custom element, you create an HTMLElement, mount the React root in connectedCallback, and unmount it in disconnectedCallback to prevent memory leaks.

When should I use Shadow DOM for my Liferay React custom element?▼

Use Shadow DOM for strict CSS isolation in your Liferay React custom element when you need to prevent portal styles from bleeding into your widget, but rely on portal CSS inheritance when Clay UI compatibility is required.

How do I prevent duplicate registration errors when defining custom elements in Liferay?▼

Prevent duplicate registration errors for custom elements in Liferay by guarding the customElements.define call, ensuring the HTMLElement is only defined once during the Client Extension lifecycle.

Does React Router work inside Liferay Client Extensions?▼

React Router works inside Liferay Client Extensions by using MemoryRouter, which keeps routing internal to the React custom element and avoids altering the browser URL or conflicting with portal routing.

How do I configure Vite for ESM-compatible bundles in Liferay Client Extensions?▼

Configure Vite for ESM-compatible bundles in Liferay Client Extensions by adjusting the rollup output settings and mapping client-extension.yaml properties to ensure safe bundling for portal deployment.

How do I securely fetch data from Liferay APIs inside a React custom element?▼

Securely fetch data from Liferay APIs inside a React custom element by using Liferay global APIs for auth tokens and secure fetches, ensuring authenticated portal integration and detaching event listeners on unmount.

Related Skills

Explore More Software Engineering Skills→
astronomerastronomer
419

setting-up-astro-project

Initialize and configure Astro/Airflow projects using the Astro CLI.

Official
Advanced
mdelapenyamdelapenya
21

lpn CLI Tester

Automate testing of the lpn CLI tool for Liferay Portal Docker images.

Community
Advanced
openshift-engopenshift-eng
112

OC Authentication Helper

Retrieve OAuth tokens and inject Authorization headers into curl requests for OpenShift clusters.

Official
Advanced
mordonezmordonez
3

liferay-expert

Routes Liferay tasks to the appropriate specialist skill based on portal inventory.

Community
Advanced