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: 1 day 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 (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-04-03T17:51:33.000Z (8 months ago)
• Last Synced: 2024-04-25T01:22:26.880Z (7 months 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: 53
• 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://img.shields.io/npm/v/vue-shadow-dom)](https://www.npmjs.com/package/vue-shadow-dom)

![MIT](https://img.shields.io/github/license/2a5f/shadow)

[![](https://img.shields.io/badge/Vue-3-brightgreen?style=flat&logo=vue.js)](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: ![p is green](./p_is_green.png)


## Build

```

npm i

npm run build

```

### Test

```

npm run test:dev

npm run test:build

npm run test:preview

```