Shadow

!MIT
Shadow dom support for Vue

> ### !!!!!!!!!! important !!!!!!!!!!
> ### For vue2 use 1.x
> ``
> 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
``