Shadow dom support for Vue
npm i vue-shadow-dom@1
-
typescript / node / bundle tools (vite webpack ...)
npm i vue-shadow-domimport { createApp } from 'vue' import shadow from 'vue-shadow-dom' const app = createApp(...) app.use(shadow) app.mount(...)
-
importmap
<head> <script type="importmap"> { "imports": { "vue": "../path/to/vue.esm-browser.js", "vue-shadow-dom": "../path/to/shadow.esm-bundler.mjs" } } </script> <script type="module"> import { createApp } from 'vue' import shadow from 'vue-shadow-root' const app = createApp(...) app.use(shadow) app.mount(...) </script> </head>
-
legacy global
<head> <script src="vue.js"></script> <script src="../path/to/shadow.global.js"></script> <script> const app = Vue.createApp(...) app.use(shadow) app.mount(...) </script> </head>
-
legacy global esm mixed
<head> <script src="vue.js"></script> <link rel="modulepreload" href="../path/to/shadow.esm-browser.mjs" /> <script type="module"> import shadow from '../path/to/shadow.esm-browser.mjs' const app = Vue.createApp(...) app.use(shadow) app.mount(...) </script> </head>
dist/shadow.global.js
For UMD<script src="vue.js"></script> <script src="../path/to/shadow.global.js"></script>
dist/shadow.esm-browser.mjs|dist/shadow.esm-browser.prod.mjs
For browser import, when Vue from global<script src="vue.js"></script> <link rel="modulepreload" href="../path/to/shadow.esm-browser.mjs" /> <script type="module"> import shadow from '../path/to/shadow.esm-browser.mjs' </script>
dist/shadow.cdn-jsdelivr.mjs|shadow.cdn-jsdelivr.prod.mjs
For browser import, when Vue from cdn<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.runtime.esm-browser.js" /> <link rel="modulepreload" href="shadow.cdn-jsdelivr.mjs" /> <script type="module"> import shadow from 'shadow.cdn-jsdelivr.mjs' </script>
dist/shadow.esm-bundler.mjs|dist/shadow.esm-bundler.prod.mjs
For packaging tool or importmapimport shadow from '../path/to/shadow.esm-bundler.mjs'
dist/shadow.cjs.cjs|dist/shadow.cjs.prod.cjs
For node cjsconst shadow = require('../path/to/shadow.cjs.prod.cjs')
shadow.js
For node cjsconst shadow = require('vue-shadow-dom')
shadow.mjs
For node esmimport shadow from 'vue-shadow-dom'
<div v-shadow id=app>
<input>
<shadow-root>
<div></div>
<p>123</p>
</shadow-root>
</div>Will output
▼ <div id="app">
▼ #shadow-root (open)
<input>
▼ <div>
▼ #shadow-root (open)
<div></div>
<p>123</p>
</div>
</div>-
<shadow-root>
Usage:<shadow-root></shadow-root>
-
abstract- type:
boolean - default:
false
it change the location of the #shadow-root
it should not be dynamically changed<article> <shadow-root><br></shadow-root> </article>
▼ <article> ▼ <div> ▼ #shadow-root (open) <br> </article>
It will make other external tags unavailable
<article> <shadow-root abstract><br></shadow-root> </article>
▼ <article> ▼ #shadow-root (open) <br> </article>
- type:
-
tag- type:
string - default:
'div'
<article> <shadow-root tag="section"><br></shadow-root> </article>
▼ <article> ▼ <section> ▼ #shadow-root (open) <br> </section> </article>
- type:
const ex = ref<ShadowRootExpose>()
<shadow-root ref="ex"></shadow-root>
-
shadow_root- type:
ShadowRoot
const shadow_root: ShadowRoot = ex.shadow_root
- type:
-
-
shadow-style
Usage:<shadow-style></shadow-style> <!-- or --> <ShadowRoot.Style></ShadowRoot.Style>
Same to html
styleThe reason it exists is that vue SFC disabled style tag
-
v-shadow
DeprecatedUsage:
<div v-shadow></div>
-
Experimental
adoptedStyleSheetsconst adoptedStyleSheets = new CSSStyleSheet() adoptedStyleSheets.replace('p { color: green }')
<shadow-root :adopted-style-sheets="[adoptedStyleSheets]"> <p>test adoptedStyleSheets</p> </shadow-root>
result:
npm i
npm run build
npm run test:dev
npm run test:build
npm run test:preview