Shadow dom support for Vue
npm install vue-shadow-dom
> npm i vue-shadow-dom@1
> `
Usage
`
npm i vue-shadow-dom
`
---
`html
`
or
`typescript
import shadow from 'vue-shadow-dom'
const app = Vue.createApp(...)
app.use(shadow)
`
$3
- dist/shadow.global.js
For UMD
`html
`
- dist/shadow.esm-browser.mjs | dist/shadow.esm-browser.prod.mjs
For browser import, when Vue from global
`html
`
- dist/shadow.cdn-jsdelivr.mjs | shadow.cdn-jsdelivr.prod.mjs
For browser import, when Vue from cdn
`html
`
- dist/shadow.esm-bundler.mjs | dist/shadow.esm-bundler.prod.mjs
For packaging tool
`js
import shadow from '../path/to/shadow.esm-bundler.mjs'
`
- dist/shadow.cjs.cjs | dist/shadow.cjs.prod.cjs
For node cjs
`js
const shadow = require('../path/to/shadow.cjs.prod.cjs')
`
- shadow.js
For node cjs
`js
const shadow = require('vue-shadow-dom')
`
- shadow.mjs
For node esm
`js
import shadow from 'vue-shadow-dom'
`
---
`html
123
`
Will output
`html
▼
▼ #shadow-root (open)
▼
▼ #shadow-root (open)
123
`
Api
-
Usage:
`html
`
### Props
- abstract
- type: boolean
- default: false
it change the location of the #shadow-root
it should not be dynamically changed
#### default
`html
`
`html
▼
▼
▼ #shadow-root (open)
`
#### abstract
It will make other external tags unavailable
`html
`
`html
▼
▼ #shadow-root (open)
`
- tag
- type: string
- default: 'div'
`html
`
`html
▼
▼
▼ #shadow-root (open)
`
### Expose
`typescript
const ex = ref()
`
`html
`
- shadow_root
- type: ShadowRoot
`typescript
const shadow_root: ShadowRoot = ex.shadow_root
`
- shadow-style
Usage:
`html
`
Same to html style
The reason it exists is that vue SFC disabled style tag
- ~~v-shadow~~
Deprecated
Usage:
`html
`
- Experimental adoptedStyleSheets
`js
const adoptedStyleSheets = new CSSStyleSheet()
adoptedStyleSheets.replace('p { color: green }')
`
`html
test adoptedStyleSheets
`
result: !p is green
Build
`
npm i
npm run build
`
$3
`
npm run test:dev
npm run test:build
npm run test:preview
``