https://github.com/2A5F/shadow
Shadow dom support for Vue
https://github.com/2A5F/shadow
shadow shadow-dom shadow-dom-support vue vue-component vue-components vue-directive vue-shadow-dom
Last synced: 7 months ago
JSON representation
Shadow dom support for Vue
- Host: GitHub
- URL: https://github.com/2A5F/shadow
- Owner: 2A5F
- License: mit
- Created: 2019-02-20T13:43:39.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-04-03T17:51:33.000Z (almost 2 years ago)
- Last Synced: 2024-11-29T18:07:03.941Z (over 1 year ago)
- Topics: shadow, shadow-dom, shadow-dom-support, vue, vue-component, vue-components, vue-directive, vue-shadow-dom
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/vue-shadow-dom
- Size: 347 KB
- Stars: 55
- Watchers: 3
- Forks: 7
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Shadow
[](https://www.npmjs.com/package/vue-shadow-dom)
[](https://v3.vuejs.org/)
***Shadow dom support for Vue***
> ### !!!!!!!!!! important !!!!!!!!!!
> ### **[For vue2 use 1.x](https://github.com/2A5F/shadow/tree/vue2)**
> ```
> npm i vue-shadow-dom@1
> ```
## Usage
- typescript / node / bundle tools (vite webpack ...)
```
npm i vue-shadow-dom
```
```typescript
import { createApp } from 'vue'
import shadow from 'vue-shadow-dom'
const app = createApp(...)
app.use(shadow)
app.mount(...)
```
- importmap
```html
{
"imports": {
"vue": "../path/to/vue.esm-browser.js",
"vue-shadow-dom": "../path/to/shadow.esm-bundler.mjs"
}
}
import { createApp } from 'vue'
import shadow from 'vue-shadow-root'
const app = createApp(...)
app.use(shadow)
app.mount(...)
```
- legacy global
```html
const app = Vue.createApp(...)
app.use(shadow)
app.mount(...)
```
- legacy global esm mixed
```html
import shadow from '../path/to/shadow.esm-browser.mjs'
const app = Vue.createApp(...)
app.use(shadow)
app.mount(...)
```
### Files
- `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
import shadow from '../path/to/shadow.esm-browser.mjs'
```
- `dist/shadow.cdn-jsdelivr.mjs` | `shadow.cdn-jsdelivr.prod.mjs`
For browser import, when Vue from cdn
```html
import shadow from 'shadow.cdn-jsdelivr.mjs'
```
- `dist/shadow.esm-bundler.mjs` | `dist/shadow.esm-bundler.prod.mjs`
For packaging tool or importmap
```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: 
## Build
```
npm i
npm run build
```
### Test
```
npm run test:dev
npm run test:build
npm run test:preview
```