1. vue-shadow-dom
Shadow dom support for Vue
vue-shadow-dom
Package: vue-shadow-dom
Created by: 2A5F
Last modified: Wed, 15 Jun 2022 15:45:07 GMT
Version: 4.2.0
License: MIT
Downloads: 13,184
Repository: https://github.com/2A5F/shadow

Install

npm install vue-shadow-dom
yarn add vue-shadow-dom

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

 <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)

Files

  • 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 tool
     import shadow from '../path/to/shadow.esm-bundler.mjs'
    
  • dist/shadow.cjs.cjs | dist/shadow.cjs.prod.cjs
    For node cjs
     const shadow = require('../path/to/shadow.cjs.prod.cjs') 
    
  • shadow.js
    For node cjs
     const shadow = require('vue-shadow-dom') 
    
  • shadow.mjs
    For node esm
     import 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>

Api

  • <shadow-root>
    Usage:

     <shadow-root></shadow-root>
    

    Props

    • abstract

      • type: boolean
      • default: false

      it change the location of the #shadow-root
      it should not be dynamically changed

      default

       <article>
        <shadow-root><br></shadow-root>
      </article>
      
      <article><div>
        ▼ #shadow-root (open)
           <br>
        </article>
      

      abstract

      It will make other external tags unavailable

       <article>
        <shadow-root abstract><br></shadow-root>
      </article>
      
      <article>
       ▼ #shadow-root (open)
          <br>
        </article>
      
    • tag

      • type: string
      • default: 'div'
       <article>
        <shadow-root tag="section"><br></shadow-root>
      </article>
      
      <article><section>
        ▼ #shadow-root (open)
           <br>
         </section>
        </article>
      

    Expose

     const ex = ref<ShadowRootExpose>()
    
     <shadow-root ref="ex"></shadow-root>
    
    • shadow_root

      • type: ShadowRoot
       const shadow_root: ShadowRoot = ex.shadow_root
      
  • shadow-style
    Usage:

     <shadow-style></shadow-style>
    <!-- or -->
    <ShadowRoot.Style></ShadowRoot.Style>
    

    Same to html style

    The reason it exists is that vue SFC disabled style tag

  • v-shadow
    Deprecated

    Usage:

     <div v-shadow></div>
    
  • Experimental adoptedStyleSheets

     const adoptedStyleSheets = new CSSStyleSheet()
    adoptedStyleSheets.replace('p { color: green }')
    
     <shadow-root :adopted-style-sheets="[adoptedStyleSheets]">
      <p>test adoptedStyleSheets</p>
    </shadow-root>
    

    result: p is green

Build

npm i
npm run build

Test

npm run test:dev
npm run test:build
npm run test:preview

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code