{"_id":"@ariel-salgado/vite-plugin-shadow-dom","_rev":"5-a05aa0873cc3bcc48df2feec8df0e9ff","name":"@ariel-salgado/vite-plugin-shadow-dom","dist-tags":{"latest":"0.1.0"},"versions":{"0.0.1":{"name":"@ariel-salgado/vite-plugin-shadow-dom","version":"0.0.1","keywords":["vite"],"author":"Ariel Salgado <ariel.salgado.acevedo@gmail.com> (https://github.com/ariel-salgado/)","license":"MIT","_id":"@ariel-salgado/vite-plugin-shadow-dom@0.0.1","maintainers":[{"name":"ariel-salgado","email":"ariel.salgado.acevedo@gmail.com"}],"homepage":"https://github.com/ariel-salgado/vite-plugins/packages/vite-plugin-shadow-dom#readme","dist":{"shasum":"878ce99cbbff3254bbb54c54fefe13d27fed77bf","tarball":"https://registry.npmjs.org/@ariel-salgado/vite-plugin-shadow-dom/-/vite-plugin-shadow-dom-0.0.1.tgz","fileCount":9,"integrity":"sha512-Pb+8YNT2Gjf9Ee1a7LEhPqXn36G38PMiHz6Wqp1wI5ricOZizSlqwsSczgs0gZABMnhdxLbGv1A/Yt3YvSurRg==","signatures":[{"sig":"MEQCIAHj6fgiMJ5TIEhD67EYU2uVgwBBBMxFnWMayeKQC84RAiBmCKipXsveUV9iAQxgjziy0udPe8HnLJaeT6KamqFIIg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28735},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.mts","module":"./dist/index.mjs","shasum":"878ce99cbbff3254bbb54c54fefe13d27fed77bf","exports":{".":"./dist/index.mjs","./package.json":"./package.json"},"scripts":{"dev":"tsdown --watch","test":"vitest","build":"tsdown","release":"sh ../../scripts/release.sh","prepublishOnly":"bun run build"},"_npmUser":{"name":"ariel-salgado","email":"ariel.salgado.acevedo@gmail.com"},"_integrity":"sha512-Pb+8YNT2Gjf9Ee1a7LEhPqXn36G38PMiHz6Wqp1wI5ricOZizSlqwsSczgs0gZABMnhdxLbGv1A/Yt3YvSurRg==","repository":{"url":"git+https://github.com/ariel-salgado/vite-plugins.git","type":"git"},"_npmVersion":"10.8.3","description":"Vite plugin that isolates page content into a Shadow DOM","directories":{},"_nodeVersion":"24.3.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.0-beta.15","tsdown":"^0.21.0-beta.2","vitest":"^4.0.18","typescript":"^5.9.3","@vitest/browser-playwright":"^4.0.18"},"peerDependencies":{"vite":"^7.0.0 || ^8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/vite-plugin-shadow-dom_0.0.1_1772201047168_0.5554517109710617","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@ariel-salgado/vite-plugin-shadow-dom","version":"0.0.2","keywords":["vite"],"author":"Ariel Salgado <ariel.salgado.acevedo@gmail.com> (https://github.com/ariel-salgado/)","license":"MIT","_id":"@ariel-salgado/vite-plugin-shadow-dom@0.0.2","maintainers":[{"name":"ariel-salgado","email":"ariel.salgado.acevedo@gmail.com"}],"homepage":"https://github.com/ariel-salgado/vite-plugins/packages/vite-plugin-shadow-dom#readme","dist":{"shasum":"a0c57880dbe0a2cc6258599171fe1a1160cff10c","tarball":"https://registry.npmjs.org/@ariel-salgado/vite-plugin-shadow-dom/-/vite-plugin-shadow-dom-0.0.2.tgz","fileCount":9,"integrity":"sha512-rYQHb/AEeWHum4mBS2d/kqOIMJHcFVVM3CVnO/2iR4iiyMqkBwlfvn8yao6Na/WqBwPkeEYHSfEQzA5iCBPswQ==","signatures":[{"sig":"MEQCIGo1T0LQC/q30EO9sSeWM87ji4Gl/oQDPnBcYcSUaFuxAiAUoRIHqZw8q7GYgdwsf0j1UJCjKhy+dvzkb0llMpw7Zw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30149},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.mts","module":"./dist/index.mjs","shasum":"a0c57880dbe0a2cc6258599171fe1a1160cff10c","exports":{".":"./dist/index.mjs","./package.json":"./package.json"},"scripts":{"dev":"tsdown --watch","test":"vitest","build":"tsdown","release":"sh ../../scripts/release.sh","prepublishOnly":"bun run build"},"_npmUser":{"name":"ariel-salgado","email":"ariel.salgado.acevedo@gmail.com"},"_integrity":"sha512-rYQHb/AEeWHum4mBS2d/kqOIMJHcFVVM3CVnO/2iR4iiyMqkBwlfvn8yao6Na/WqBwPkeEYHSfEQzA5iCBPswQ==","repository":{"url":"git+https://github.com/ariel-salgado/vite-plugins.git","type":"git"},"_npmVersion":"10.8.3","description":"Vite plugin that isolates page content into a Shadow DOM","directories":{},"_nodeVersion":"24.3.0","dependencies":{"js-beautify":"^1.15.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.0-beta.15","tsdown":"^0.21.0-beta.2","vitest":"^4.0.18","@types/bun":"^1.3.9","typescript":"^5.9.3","@types/node":"^25.3.2","@types/js-beautify":"^1.14.3","@vitest/browser-playwright":"^4.0.18"},"peerDependencies":{"vite":"^7.0.0 || ^8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/vite-plugin-shadow-dom_0.0.2_1772224517948_0.4034647295322864","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@ariel-salgado/vite-plugin-shadow-dom","version":"0.0.3","keywords":["vite"],"author":"Ariel Salgado <ariel.salgado.acevedo@gmail.com> (https://github.com/ariel-salgado/)","license":"MIT","_id":"@ariel-salgado/vite-plugin-shadow-dom@0.0.3","maintainers":[{"name":"ariel-salgado","email":"ariel.salgado.acevedo@gmail.com"}],"homepage":"https://github.com/ariel-salgado/vite-plugins/packages/vite-plugin-shadow-dom#readme","dist":{"shasum":"c020f9e13460fd35dfe3da1afcc3e106e21be2d1","tarball":"https://registry.npmjs.org/@ariel-salgado/vite-plugin-shadow-dom/-/vite-plugin-shadow-dom-0.0.3.tgz","fileCount":9,"integrity":"sha512-aqhoL1IMUwNQWwP6UErm8zLCCVLf1/bj22uvv7UiSDfzGRK408mmHZJv+b6TqjL57DYnbAUdRzc/TsQQcu/+mw==","signatures":[{"sig":"MEUCID9g6Fzoi0Gq9WU4lP5LV037YwWTUiv76K3WpYeIiZf5AiEAxB1heCiSAgsl7ch52EQh26MFq/IFOOzPhLQKusYw+8k=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34499},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.mts","module":"./dist/index.mjs","shasum":"c020f9e13460fd35dfe3da1afcc3e106e21be2d1","exports":{".":"./dist/index.mjs","./package.json":"./package.json"},"scripts":{"dev":"tsdown --watch","test":"vitest","build":"tsdown","release":"sh ../../scripts/release.sh","prepublishOnly":"bun run build"},"_npmUser":{"name":"ariel-salgado","email":"ariel.salgado.acevedo@gmail.com"},"_integrity":"sha512-aqhoL1IMUwNQWwP6UErm8zLCCVLf1/bj22uvv7UiSDfzGRK408mmHZJv+b6TqjL57DYnbAUdRzc/TsQQcu/+mw==","repository":{"url":"git+https://github.com/ariel-salgado/vite-plugins.git","type":"git"},"_npmVersion":"10.8.3","description":"Vite plugin that isolates page content into a Shadow DOM","directories":{},"_nodeVersion":"24.3.0","dependencies":{"js-beautify":"^1.15.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.0-beta.15","tsdown":"^0.21.0-beta.2","vitest":"^4.0.18","@types/bun":"^1.3.9","typescript":"^5.9.3","@types/node":"^25.3.2","@types/js-beautify":"^1.14.3","@vitest/browser-playwright":"^4.0.18"},"peerDependencies":{"vite":"^7.0.0 || ^8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/vite-plugin-shadow-dom_0.0.3_1772234535081_0.29531992592490663","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@ariel-salgado/vite-plugin-shadow-dom","version":"0.0.4","keywords":["vite","vite-plugin","shadow-dom","encapsulation","css-isolation","dom-isolation"],"author":"Ariel Salgado <ariel.salgado.acevedo@gmail.com> (https://github.com/ariel-salgado/)","license":"MIT","_id":"@ariel-salgado/vite-plugin-shadow-dom@0.0.4","maintainers":[{"name":"ariel-salgado","email":"ariel.salgado.acevedo@gmail.com"}],"homepage":"https://github.com/ariel-salgado/vite-plugins/tree/main/packages/vite-plugin-shadow-dom#readme","dist":{"shasum":"6882f196b7722210c7799be4f34e28958cf00476","tarball":"https://registry.npmjs.org/@ariel-salgado/vite-plugin-shadow-dom/-/vite-plugin-shadow-dom-0.0.4.tgz","fileCount":11,"integrity":"sha512-pGW/sMZtst+bRk7iNqC74QKoErxIKwS/aYj/ppMECse3xOtsZqRctrg/2ze7olswqBQAYbKarXjbKLs20ZD29A==","signatures":[{"sig":"MEUCIQDOEM4aVec8fyNAOYJcbc3peAjktlaxesuqcx+2TppheQIgRv0v/JVuTHrzwRdnosBDNPjjESBA492kSonS6mbK9tM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":40781},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.mts","module":"./dist/index.mjs","shasum":"6882f196b7722210c7799be4f34e28958cf00476","exports":{".":"./dist/index.mjs","./package.json":"./package.json"},"scripts":{"dev":"tsdown --watch","test":"vitest","build":"tsdown","release":"sh ../../scripts/release.sh","prepublishOnly":"bun run build"},"_npmUser":{"name":"ariel-salgado","email":"ariel.salgado.acevedo@gmail.com"},"_integrity":"sha512-pGW/sMZtst+bRk7iNqC74QKoErxIKwS/aYj/ppMECse3xOtsZqRctrg/2ze7olswqBQAYbKarXjbKLs20ZD29A==","repository":{"url":"git+https://github.com/ariel-salgado/vite-plugins.git","type":"git"},"_npmVersion":"10.8.3","description":"Vite plugin that isolates your app into a Shadow DOM — with zero changes to your application code","directories":{},"_nodeVersion":"24.3.0","dependencies":{"js-beautify":"^1.15.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.0-beta.15","tsdown":"^0.21.0-beta.2","vitest":"^4.0.18","@types/bun":"^1.3.9","typescript":"^5.9.3","@types/node":"^25.3.2","@types/js-beautify":"^1.14.3","@vitest/browser-playwright":"^4.0.18"},"peerDependencies":{"vite":"^7.0.0 || ^8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/vite-plugin-shadow-dom_0.0.4_1772239580462_0.1351371105000425","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@ariel-salgado/vite-plugin-shadow-dom","type":"module","version":"0.1.0","description":"Vite plugin that isolates your app into a Shadow DOM — with zero changes to your application code","author":{"name":"Ariel Salgado","email":"ariel.salgado.acevedo@gmail.com","url":"https://github.com/ariel-salgado/"},"license":"MIT","homepage":"https://github.com/ariel-salgado/vite-plugins/tree/main/packages/vite-plugin-shadow-dom#readme","repository":{"type":"git","url":"git+https://github.com/ariel-salgado/vite-plugins.git","directory":"packages/vite-plugin-shadow-dom"},"keywords":["vite","vite-plugin","shadow-dom","encapsulation","css-isolation","dom-isolation"],"exports":{".":"./dist/index.mjs","./client":"./dist/client.js","./package.json":"./package.json"},"types":"./dist/index.d.mts","publishConfig":{"access":"public"},"scripts":{"build":"tsdown","dev":"tsdown --watch","test":"vitest","prepublishOnly":"bun run build"},"peerDependencies":{"vite":"^7.0.0 || ^8.0.0-0"},"dependencies":{"js-beautify":"1.15.4"},"devDependencies":{"@types/bun":"catalog:","@types/js-beautify":"1.14.3","@types/node":"25.3.3","@vitest/browser-playwright":"catalog:","tsdown":"catalog:","typescript":"catalog:","vite":"catalog:","vitest":"catalog:"},"overrides":{"vite":"catalog:"},"_id":"@ariel-salgado/vite-plugin-shadow-dom@0.1.0","gitHead":"e6ed1d5fc2fab479ef55679a58de853666297214","bugs":{"url":"https://github.com/ariel-salgado/vite-plugins/issues"},"_nodeVersion":"24.3.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-pcCFESu2x+HDgqC8oYr1c50V/304ZORtvOxGW+CXgboJs8k5NwSjhljYRtcMNohofL9nRp02ivbsUhjiOy3AcA==","shasum":"0338031a4063218370b32b538d5735ecbd47a78b","tarball":"https://registry.npmjs.org/@ariel-salgado/vite-plugin-shadow-dom/-/vite-plugin-shadow-dom-0.1.0.tgz","fileCount":11,"unpackedSize":40772,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCA+8Ws2NleuBlXQLSWCoreN/vmqBEnCBpsy+GZA1P4BAIgCtOoc9jUJOLmClUT6FuBjatxvwH8KXptSnSLTFxqzCA="}]},"_npmUser":{"name":"ariel-salgado","email":"ariel.salgado.acevedo@gmail.com"},"directories":{},"maintainers":[{"name":"ariel-salgado","email":"ariel.salgado.acevedo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vite-plugin-shadow-dom_0.1.0_1772338873203_0.812582753504594"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-27T14:04:07.019Z","modified":"2026-03-01T04:21:13.475Z","0.0.1":"2026-02-27T14:04:07.317Z","0.0.2":"2026-02-27T20:35:18.080Z","0.0.3":"2026-02-27T23:22:15.261Z","0.0.4":"2026-02-28T00:46:20.614Z","0.1.0":"2026-03-01T04:21:13.347Z"},"author":{"name":"Ariel Salgado","email":"ariel.salgado.acevedo@gmail.com","url":"https://github.com/ariel-salgado/"},"license":"MIT","homepage":"https://github.com/ariel-salgado/vite-plugins/tree/main/packages/vite-plugin-shadow-dom#readme","keywords":["vite","vite-plugin","shadow-dom","encapsulation","css-isolation","dom-isolation"],"repository":{"type":"git","url":"git+https://github.com/ariel-salgado/vite-plugins.git","directory":"packages/vite-plugin-shadow-dom"},"description":"Vite plugin that isolates your app into a Shadow DOM — with zero changes to your application code","maintainers":[{"name":"ariel-salgado","email":"ariel.salgado.acevedo@gmail.com"}],"readme":"# @ariel-salgado/vite-plugin-shadow-dom\n\nA Vite plugin that wraps your app inside a [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM), providing true style and DOM encapsulation with no changes to your application code.\n\n> **Note:** This plugin is designed and tested for vanilla HTML, JavaScript, and TypeScript projects. Framework support has not been tested.\n\n## Motivation\n\nWhen embedding a Vite app inside a third-party page or a legacy document, the host page's styles inevitably bleed into your app — and yours leak out.\nShadow DOM is the platform's native solution to this problem. This plugin handles all the wiring so your app runs in a fully isolated shadow tree without you having to restructure anything.\n\n## How it works\n\nThe plugin finds the element with `id=\"app\"` in your HTML, moves it into a `<template>` tag, replaces it with a shadow host `<div>`, and injects a bootstrap `<script>` that attaches a shadow root and stamps the template into it at runtime.\n\nEverything else in `<body>` — any headers, footers, or scripts outside `#app` — is left exactly where it is in the regular document.\n\nGiven this input:\n\n```html\n<body>\n  <div id=\"app\">\n    <h1>Hello</h1>\n  </div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n```\n\nThe plugin produces:\n\n```html\n<body>\n  <div id=\"shadow-host\" style=\"display:block;width:100%;height:100%\"></div>\n\n  <template id=\"shadow-template\">\n    <div id=\"app\">\n      <h1>Hello</h1>\n    </div>\n  </template>\n\n  <script type=\"module\">\n    const host = document.getElementById('shadow-host');\n    const shadow = host.attachShadow({ mode: 'open', delegatesFocus: true, serializable: true });\n\n    const tpl = document.getElementById('shadow-template');\n    shadow.appendChild(tpl.content.cloneNode(true));\n\n    window['__shadowRoot'] = shadow;\n\n    // Patch document query methods to search the shadow root first\n    for (const m of ['getElementById', 'querySelector', 'querySelectorAll']) {\n      const orig = document[m].bind(document);\n      document[m] = (...args) => {\n        const r = shadow[m](...args);\n        return r != null && (!('length' in r) || r.length > 0) ? r : orig(...args);\n      };\n    }\n\n    // Mirror dev-mode <style> injections into the shadow root\n    new MutationObserver(mutations => {\n      for (const { addedNodes } of mutations)\n        for (const node of addedNodes)\n          if (node.nodeName === 'STYLE') shadow.appendChild(node.cloneNode(true));\n    }).observe(document.head, { childList: true });\n\n    const link = document.createElement('link');\n    link.rel = 'stylesheet';\n    link.href = '/assets/index.css';\n    shadow.appendChild(link);\n\n    import('/assets/index.js');\n  </script>\n</body>\n```\n\n## Installation\n\n```bash\n# npm\nnpm install -D @ariel-salgado/vite-plugin-shadow-dom\n\n# pnpm\npnpm add -D @ariel-salgado/vite-plugin-shadow-dom\n\n# bun\nbun add -D @ariel-salgado/vite-plugin-shadow-dom\n```\n\n**Requires Vite >= 7.0.0**\n\n## Usage\n\n```typescript\nimport { shadowDOM } from '@ariel-salgado/vite-plugin-shadow-dom';\n// vite.config.ts\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n\tplugins: [shadowDOM()],\n});\n```\n\nWith options:\n\n```typescript\nimport { shadowDOM } from '@ariel-salgado/vite-plugin-shadow-dom';\n\nexport default defineConfig({\n\tplugins: [\n\t\tshadowDOM({\n\t\t\tmode: 'closed',\n\t\t\tcssStrategy: 'constructable',\n\t\t\tformatOutput: false,\n\t\t}),\n\t],\n});\n```\n\nSee the [documentation](./docs/plugin-options.md) for a full description of every option.\n\n## Dev mode\n\nThe plugin runs in both dev and production.\nDuring development, Vite injects CSS as `<style>` elements directly into `document.head` at runtime rather than emitting `<link>` tags. The bootstrap script installs a `MutationObserver` on `document.head` that automatically clones any `<style>` tag into the shadow root as it appears, so hot module replacement and style updates work without any extra configuration.\n\n## CSS scoping\n\nBuilt CSS files are injected into the shadow root as `<link>` tags (or as `CSSStyleSheet` objects when `cssStrategy: 'constructable'` is set), so all your styles are scoped to the shadow tree. CSS files are also kept in `<head>`, which ensures document-level selectors like `:root` and `body` continue to work as expected.\n\n## Closed mode\n\nWhen `mode: 'closed'`, `element.shadowRoot` returns `null` from outside the shadow tree. The plugin exposes the shadow root on `window.__shadowRoot` before importing your app's JS so it is always accessible regardless of mode.\n\n```typescript\n// Access the shadow root directly if needed\nconst shadow = window.__shadowRoot;\nconst app = shadow.getElementById('app');\n```\n\nThe window property name is configurable via the `shadowRootGlobal` option.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ariel-salgado/vite-plugins/issues"}}