vue-shadow-dom
TypeScript icon, indicating that this package has built-in type declarations

4.2.0 • Public • Published

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

/vue-shadow-dom/

    Package Sidebar

    Install

    npm i vue-shadow-dom

    Weekly Downloads

    3,594

    Version

    4.2.0

    License

    MIT

    Unpacked Size

    227 kB

    Total Files

    30

    Last publish

    Collaborators

    • cc2a