Shadow dom support for Vue
npm i vue-shadow-dom@1
npm i vue-shadow-dom
<head>
<script src="vue.js"></script>
<script src="../path/to/shadow.global.js"></script>
<script>
const app = Vue.createApp(...)
app.use(shadow)
</script>
</head>or
import shadow from 'vue-shadow-dom'
const app = Vue.createApp(...)
app.use(shadow)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 toolimport 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
Usage:<div v-shadow></div>
npm i
npm run build
npm run test:dev
npm run test:build
npm run test:preview
![@mergify[bot]](https://avatars.githubusercontent.com/in/10562?s=64&v=4){kind=small}
![@dependabot-preview[bot]](https://avatars.githubusercontent.com/in/2141?s=64&v=4){kind=small}
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}
