Isolet Widget Isolation

When you need to drop a React, Svelte, or vanilla JS component onto any page without style collisions or dependency conflicts, this is your tool. It wraps components in shadow DOM with scoped CSS, builds them into script tag widgets or ESM bundles, and handles the tedious parts like data URI inlining for fonts and images. The CLI setup is straightforward and you get proper TypeScript types. Most useful for embeddable widgets, third-party integrations, or internal tools that need to coexist with unknown host page styles. The reactive props API means you can update without remounting, which beats the typical mount-unmount cycle most widget libraries force on you.

skills.sh installs: 371
GitHub stars: 26
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add aradotso/trending-skills --skill isolet-widget-isolation --agent claude-code

Installs into .claude/skills of the current project.

Files

isolet Widget Isolation

Skill by ara.so — Daily 2026 Skills collection.

isolet-js packages any component (React, Solid, Svelte, vanilla JS, etc.) into a self-contained, isolated widget. Widgets render inside shadow DOM by default, so styles are fully scoped. Output formats include IIFE (script tag), ESM, and CommonJS.

Install

npm install isolet-js

Core API: `createIsolet`

import { createIsolet } from "isolet-js";

const widget = createIsolet({
  name: "my-widget",          // required: unique identifier
  mount: myMountFn,           // required: (container, props) => cleanup | void
  css: `h1 { color: red; }`,  // optional: scoped CSS
  isolation: "shadow-dom",    // "shadow-dom" | "scoped" | "none"
  shadowMode: "open",         // "open" | "closed"
  hostAttributes: { "data-widget": "true" },
  zIndex: 9999,
});

widget.mount(document.body, { title: "Hello" }); // mount into target
widget.update({ title: "Updated" });             // update props
widget.unmount();                                // tear down

SKILL.md on GitHub