Isolet Widget Isolation

作者 reason-machines2384a003145a无许可证83 个星标收录于 2026年10月8日更新于 2026年10月8日仓库3个月前更新

Package any component into a self-contained, isolated widget with shadow DOM, scoped styles, and multi-framework support

仅含说明Software Development

AI 生成的概览

将任意前端组件打包为自带 shadow DOM 样式隔离的独立小组件，并支持多种输出格式。

功能: 该技能介绍 isolet-js，这是一个库和 CLI，可将 React、Solid、Svelte 或原生 JS 组件封装为相互隔离的组件。内容涵盖 createIsolet API、各框架适配器、隔离模式（shadow-dom、scoped、none）、构建配置、CSS 与资源内联，以及 IIFE/ESM/CommonJS 输出。还提供样式泄漏、清理和全局名称等问题的排查说明。
适用场景: 当你需要把组件嵌入任意页面且不希望产生样式冲突，或需要将组件打包为可直接通过 script 标签引入的组件时使用。也适用于构建带作用域 CSS、支持多框架的自包含组件包。
运行要求: 需要 Node.js 和 npm 来安装 isolet-js；使用 CLI（npx isolet-js）进行脚手架初始化和构建。框架适配器需要相应框架（React、Solid、Svelte）可用，外部依赖需由宿主页面提供。该技能本身不附带脚本，只有说明文档。

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

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 targetwidget.update({ title: "Updated" });             // update propswidget.unmount();                                // tear down
// Instance propertieswidget.container;   // HTMLElement — the render containerwidget.shadowRoot;  // ShadowRoot | nullwidget.mounted;     // boolean

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 targetwidget.update({ title: "Updated" });             // update propswidget.unmount();                                // tear down
// Instance propertieswidget.container;   // HTMLElement — the render containerwidget.shadowRoot;  // ShadowRoot | nullwidget.mounted;     // boolean

Framework Adapters

React

tsx

import { createIsolet } from "isolet-js";import { react } from "isolet-js/react";
function Greeting({ name }: { name: string }) {  return <h1>Hello, {name}!</h1>;}
const widget = createIsolet({  name: "greeting",  mount: react(Greeting),  css: `h1 { color: tomato; font-family: sans-serif; }`,});
widget.mount(document.body, { name: "World" });widget.update({ name: "Isolet" });widget.unmount();

import { createIsolet } from "isolet-js";import { react } from "isolet-js/react";
function Greeting({ name }: { name: string }) {  return <h1>Hello, {name}!</h1>;}
const widget = createIsolet({  name: "greeting",  mount: react(Greeting),  css: `h1 { color: tomato; font-family: sans-serif; }`,});
widget.mount(document.body, { name: "World" });widget.update({ name: "Isolet" });widget.unmount();

Vanilla JS

import { createIsolet } from "isolet-js";import { vanilla } from "isolet-js/vanilla";
const widget = createIsolet({  name: "counter",  mount: vanilla((container, props) => {    let count = props.initial ?? 0;    const btn = document.createElement("button");    btn.textContent = `Count: ${count}`;    btn.onclick = () => {      btn.textContent = `Count: ${++count}`;    };    container.appendChild(btn);
    // Return cleanup function    return () => container.removeChild(btn);  }),});
widget.mount(document.getElementById("app"), { initial: 5 });

import { createIsolet } from "isolet-js";import { vanilla } from "isolet-js/vanilla";
const widget = createIsolet({  name: "counter",  mount: vanilla((container, props) => {    let count = props.initial ?? 0;    const btn = document.createElement("button");    btn.textContent = `Count: ${count}`;    btn.onclick = () => {      btn.textContent = `Count: ${++count}`;    };    container.appendChild(btn);
    // Return cleanup function    return () => container.removeChild(btn);  }),});
widget.mount(document.getElementById("app"), { initial: 5 });

Solid

tsx

import { createIsolet } from "isolet-js";import { render } from "solid-js/web";import App from "./App";
const widget = createIsolet({  name: "solid-widget",  mount(container, props) {    const dispose = render(() => <App {...props} />, container);    return dispose; // dispose is the cleanup function  },});

import { createIsolet } from "isolet-js";import { render } from "solid-js/web";import App from "./App";
const widget = createIsolet({  name: "solid-widget",  mount(container, props) {    const dispose = render(() => <App {...props} />, container);    return dispose; // dispose is the cleanup function  },});

Svelte

import { createIsolet } from "isolet-js";import App from "./App.svelte";
const widget = createIsolet({  name: "svelte-widget",  mount(container, props) {    const app = new App({ target: container, props });    return () => app.$destroy();  },});

import { createIsolet } from "isolet-js";import App from "./App.svelte";
const widget = createIsolet({  name: "svelte-widget",  mount(container, props) {    const app = new App({ target: container, props });    return () => app.$destroy();  },});

Isolation Modes

// Full CSS isolation — shadow DOM (default)createIsolet({ name: "w", mount: fn, isolation: "shadow-dom" });
// Scoped — plain div wrapper, styles injected globallycreateIsolet({ name: "w", mount: fn, isolation: "scoped" });
// No isolation — mounts directly into target elementcreateIsolet({ name: "w", mount: fn, isolation: "none" });

// Full CSS isolation — shadow DOM (default)createIsolet({ name: "w", mount: fn, isolation: "shadow-dom" });
// Scoped — plain div wrapper, styles injected globallycreateIsolet({ name: "w", mount: fn, isolation: "scoped" });
// No isolation — mounts directly into target elementcreateIsolet({ name: "w", mount: fn, isolation: "none" });

CLI

npx isolet-js init            # scaffold isolet.config.tsnpx isolet-js build           # bundle widget(s) from confignpx isolet-js build --watch   # rebuild on file changesnpx isolet-js build --minify  # minified production build

npx isolet-js init            # scaffold isolet.config.tsnpx isolet-js build           # bundle widget(s) from confignpx isolet-js build --watch   # rebuild on file changesnpx isolet-js build --minify  # minified production build

Config File

// isolet.config.tsimport { defineConfig } from "isolet-js";
export default defineConfig({  name: "my-widget",  entry: "./src/index.ts",  styles: "./src/widget.css",       // CSS to inline; url() assets become data URIs  format: ["iife", "esm"],          // output formats  outDir: "./dist",                 // default: "dist"  globalName: "MyWidget",           // global name for IIFE builds  external: ["react"],              // don't bundle these deps  dts: true,                        // emit .d.ts files  minify: true,                     // minify output  platform: "browser",              // target platform});

// isolet.config.tsimport { defineConfig } from "isolet-js";
export default defineConfig({  name: "my-widget",  entry: "./src/index.ts",  styles: "./src/widget.css",       // CSS to inline; url() assets become data URIs  format: ["iife", "esm"],          // output formats  outDir: "./dist",                 // default: "dist"  globalName: "MyWidget",           // global name for IIFE builds  external: ["react"],              // don't bundle these deps  dts: true,                        // emit .d.ts files  minify: true,                     // minify output  platform: "browser",              // target platform});

Multiple Widgets

export default defineConfig([  { name: "widget-a", entry: "./src/a.ts", styles: "./src/a.css" },  { name: "widget-b", entry: "./src/b.ts", format: ["esm"] },]);

export default defineConfig([  { name: "widget-a", entry: "./src/a.ts", styles: "./src/a.css" },  { name: "widget-b", entry: "./src/b.ts", format: ["esm"] },]);

CSS & Asset Handling

The build pipeline handles everything automatically:

styles in config → CSS is read, url() references (fonts, images) inlined as data URIs, result available as __ISOLET_CSS__ in your entry
.css imports → converted to JS string exports (shadow DOM safe)
Asset imports (.png, .woff2, .mp3, etc.) → inlined as data URIs
styles: "./path.css" in createIsolet → resolved and inlined at build time

// Entry file using __ISOLET_CSS__ injected by CLIimport { createIsolet } from "isolet-js";import { react } from "isolet-js/react";import MyComponent from "./MyComponent";
declare const __ISOLET_CSS__: string;
export const widget = createIsolet({  name: "my-widget",  css: __ISOLET_CSS__,   // populated from config.styles at build time  mount: react(MyComponent),});

// Entry file using __ISOLET_CSS__ injected by CLIimport { createIsolet } from "isolet-js";import { react } from "isolet-js/react";import MyComponent from "./MyComponent";
declare const __ISOLET_CSS__: string;
export const widget = createIsolet({  name: "my-widget",  css: __ISOLET_CSS__,   // populated from config.styles at build time  mount: react(MyComponent),});

Or reference the CSS path directly (auto-resolved at build time):

createIsolet({  name: "my-widget",  styles: "./widget.css",  // isolet build resolves this  mount: react(MyComponent),});

createIsolet({  name: "my-widget",  styles: "./widget.css",  // isolet build resolves this  mount: react(MyComponent),});

Manual Vite Plugin Setup

If using Vite directly instead of the CLI:

// vite.config.tsimport { defineConfig } from "vite";import {  cssTextPlugin,  inlineAssetsPlugin,  autoStylesPlugin,} from "isolet-js/plugins";
export default defineConfig({  plugins: [cssTextPlugin(), inlineAssetsPlugin(), autoStylesPlugin()],});

// vite.config.tsimport { defineConfig } from "vite";import {  cssTextPlugin,  inlineAssetsPlugin,  autoStylesPlugin,} from "isolet-js/plugins";
export default defineConfig({  plugins: [cssTextPlugin(), inlineAssetsPlugin(), autoStylesPlugin()],});

Script Tag (IIFE) Usage

html

<script src="https://unpkg.com/isolet-js/dist/index.iife.js"></script><script>  const { createIsolet } = __ISOLET__;
  const widget = createIsolet({    name: "inline-widget",    mount(container, props) {      container.innerHTML = `<p>Hello, ${props.name ?? "World"}!</p>`;    },    css: `p { font-family: sans-serif; color: navy; }`,  });
  widget.mount(document.body, { name: "Visitor" });</script>

<script src="https://unpkg.com/isolet-js/dist/index.iife.js"></script><script>  const { createIsolet } = __ISOLET__;
  const widget = createIsolet({    name: "inline-widget",    mount(container, props) {      container.innerHTML = `<p>Hello, ${props.name ?? "World"}!</p>`;    },    css: `p { font-family: sans-serif; color: navy; }`,  });
  widget.mount(document.body, { name: "Visitor" });</script>

For a bundled custom widget via IIFE:

// isolet.config.tsexport default defineConfig({  name: "my-widget",  entry: "./src/index.ts",  format: ["iife"],  globalName: "MyWidget",  minify: true,});

// isolet.config.tsexport default defineConfig({  name: "my-widget",  entry: "./src/index.ts",  format: ["iife"],  globalName: "MyWidget",  minify: true,});

html

<!-- Resulting script tag distribution --><script src="./dist/my-widget.iife.js"></script><script>  MyWidget.widget.mount(document.getElementById("root"), { title: "Hi" });</script>

<!-- Resulting script tag distribution --><script src="./dist/my-widget.iife.js"></script><script>  MyWidget.widget.mount(document.getElementById("root"), { title: "Hi" });</script>

Common Patterns

Lazy-mount on demand

const widget = createIsolet({ name: "chat", mount: react(ChatApp), css: styles });
document.getElementById("open-chat").addEventListener("click", () => {  if (!widget.mounted) {    widget.mount(document.body, { userId: currentUserId });  }});
document.getElementById("close-chat").addEventListener("click", () => {  widget.unmount();});

const widget = createIsolet({ name: "chat", mount: react(ChatApp), css: styles });
document.getElementById("open-chat").addEventListener("click", () => {  if (!widget.mounted) {    widget.mount(document.body, { userId: currentUserId });  }});
document.getElementById("close-chat").addEventListener("click", () => {  widget.unmount();});

z-index overlay widget

const modal = createIsolet({  name: "modal",  mount: react(ModalComponent),  css: modalStyles,  zIndex: 10000,  hostAttributes: { role: "dialog", "aria-modal": "true" },});

const modal = createIsolet({  name: "modal",  mount: react(ModalComponent),  css: modalStyles,  zIndex: 10000,  hostAttributes: { role: "dialog", "aria-modal": "true" },});

Reactive props updates

const widget = createIsolet({ name: "status", mount: react(StatusBar), css });widget.mount(document.body, { status: "idle" });
// Later, update without remounting:widget.update({ status: "loading" });widget.update({ status: "done" });

const widget = createIsolet({ name: "status", mount: react(StatusBar), css });widget.mount(document.body, { status: "idle" });
// Later, update without remounting:widget.update({ status: "loading" });widget.update({ status: "done" });

Troubleshooting

Styles leaking in or out Use isolation: "shadow-dom" (default). Verify your css option or styles path is correctly set — without CSS in the shadow root, the host page styles will not apply inside.

__ISOLET_CSS__ is undefined This variable is only injected by the isolet build CLI when styles is set in config. For manual Vite builds, add autoStylesPlugin() to your Vite config.

Component not rendering Ensure the mount function appends to container, not to document.body. In shadow DOM mode, the container is inside the shadow root.

Cleanup not running Return a cleanup function from your mount callback. Without it, widget.unmount() cannot tear down framework internals (timers, subscriptions, etc.).

IIFE global not found Check globalName in config matches what you reference in HTML. The runtime core exposes globalThis.__ISOLET__ when no globalName is set.

External deps not found at runtime If you set external: ["react"], the host page must provide React globally or via module federation before your widget script loads.

来源与署名

来源：reason-machines/trending-skills位于skills/isolet-widget-isolation提交2384a00

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Isolet Widget Isolation

isolet Widget Isolation

Install

Core API: `createIsolet`

Framework Adapters

React

Vanilla JS

Solid

Svelte

Isolation Modes

CLI

Config File

Multiple Widgets

CSS & Asset Handling

Manual Vite Plugin Setup

Script Tag (IIFE) Usage

Common Patterns

Lazy-mount on demand

z-index overlay widget

Reactive props updates

Troubleshooting

来源与署名

更多来自 reason-machines/trending-skills 的技能

Yourvpndead Vpn Detection

X Mentor Skill Nuwa

Wildworld Dataset

Understand Anything Knowledge Graph

Webphysics Avbd Engine

Ui Ux Pro Max Skill

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices

Isolet Widget Isolation

isolet Widget Isolation

Install

Core API: createIsolet

Framework Adapters

React

Vanilla JS

Solid

Svelte

Isolation Modes

CLI

Config File

Multiple Widgets

CSS & Asset Handling

Manual Vite Plugin Setup

Script Tag (IIFE) Usage

Common Patterns

Lazy-mount on demand

z-index overlay widget

Reactive props updates

Troubleshooting

来源与署名

更多来自 reason-machines/trending-skills 的技能

Yourvpndead Vpn Detection

X Mentor Skill Nuwa

Wildworld Dataset

Understand Anything Knowledge Graph

Webphysics Avbd Engine

Ui Ux Pro Max Skill

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices

Core API: `createIsolet`