2a5f / shadow Goto Github PK

View Code? Open in Web Editor NEW

53.0 3.0 7.0 355 KB

Shadow dom support for Vue

Home Page: https://www.npmjs.com/package/vue-shadow-dom

License: MIT License

TypeScript 60.33% JavaScript 25.59% HTML 1.52% Vue 12.56%

vue vue-shadow-dom shadow-dom vue-component vue-components vue-directive shadow shadow-dom-support

shadow's Introduction

Shadow

Shadow dom support for Vue

!!!!!!!!!! important !!!!!!!!!!

For vue2 use 1.x
npm i vue-shadow-dom@1

Usage

typescript / node / bundle tools (vite webpack ...)

npm i vue-shadow-dom

import { createApp } from 'vue'
import shadow from 'vue-shadow-dom'

const app = createApp(...)
app.use(shadow)
app.mount(...)

importmap

<head>
  <script type="importmap">
    {
      "imports": {
        "vue": "../path/to/vue.esm-browser.js",
        "vue-shadow-dom": "../path/to/shadow.esm-bundler.mjs"
      }
    }
  </script>

  <script type="module">
    import { createApp } from 'vue'
    import shadow from 'vue-shadow-root'

    const app = createApp(...)
    app.use(shadow)
    app.mount(...)
  </script>
</head>

legacy global

<head>
  <script src="vue.js"></script>
  <script src="../path/to/shadow.global.js"></script>
  
  <script>
    const app = Vue.createApp(...)
    app.use(shadow)
    app.mount(...)
  </script>
</head>

legacy global esm mixed

<head>
  <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'
    
    const app = Vue.createApp(...)
    app.use(shadow)
    app.mount(...)
  </script>
</head>

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 or importmap
```
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>

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

Build

npm i
npm run build

Test

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

shadow's People

Contributors

Stargazers

Watchers

Forkers

maritaria aa875982361 etiennebruines lbc19920615 cc-lgtm justinwinthers neil585456525

shadow's Issues

shadow-root document doesn't include styles

When I use this component with SFC, the shadow root doesn't include styles. I use vue-cli-service. Thank you.

Uncaught TypeError: o.defineComponent is not a function

Hello!

When I am importing library to main.js, I get this error in console: Uncaught TypeError: o.defineComponent is not a function .

import shadow from 'vue-shadow-dom';

Could you please help?

Strange behaviour for shadow-root with :static=true

<shadow-root :static=true>
    <div id="test1">TEST 1</div>
    <div id="test2">TEST 2</div>
    <div id="test3">TEST 3</div>
</shadow-root>

results in the second div dropping outside of the shadow root

<div>
    #shadow-root mode(open)
        <div id="test1">TEST 1</div>
        <div id="test1">TEST 3</div>
    <div id="test2">TEST 2</div>
</div>

Need to set runtimeCompiler: true in vue.config.js

I was running into the following error with npm run vserve:

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

This is fixed by adding runtimeCompiler: true to vue.config.js. Please add this to the documentation.

NuxtJS Error

The moment I try import the element it fails:

app.js:507 Error: [nuxt] Error while mounting app: TypeError: Cannot read property 'install' of undefined at app.js:518

Experimental adoptedStyleSheets

#214 (comment)

For styling :

mounted() { var shadow_css = new CSSStyleSheet; shadow_css.replaceSync(YOUR_CSS) this.$el.shadowRoot.adoptedStyleSheets = [ shadow_css ]; }

61fc8ac

Experimental `adoptedStyleSheets`

const adoptedStyleSheets = new CSSStyleSheet()
adoptedStyleSheets.replace('p { color: green }')

<shadow-root :adopted-style-sheets="[adoptedStyleSheets]">
  <p>test adoptedStyleSheets</p>
</shadow-root>

result:

[DepShield] (CVSS 9.0) Vulnerability due to usage of serialize-javascript:2.1.2

Vulnerabilities

DepShield reports that this application's usage of serialize-javascript:2.1.2 results in the following vulnerability(s):

(CVSS 9.0) CWE-502: Deserialization of Untrusted Data

Occurrences

serialize-javascript:2.1.2 is a transitive dependency introduced by the following direct dependency(s):

• rollup-plugin-terser:5.2.0
└─ serialize-javascript:2.1.2

_{This is an automated GitHub Issue created by Sonatype DepShield. Details on managing GitHub Apps, including DepShield, are available for personal and organization accounts. Please submit questions or feedback about DepShield to the Sonatype DepShield Community.}

DepShield Deprecation Notice

Depshield will be deprecated on Monday December 12th

Please install our new product, Sonatype Lift with advanced features

Not able to configure with vue 2

I'm trying to configure this package in vue2 project with following lines in main.js

const app = new Vue({
  el: '#app',
  router: router,
  store: store,
  render: (h) => h(App)
});

import shadow from 'vue-shadow-dom';
app.use(shadow);

But it's not working and giving me following error:

shadow.min.js?eb17:1 Uncaught TypeError: o.defineComponent is not a function
    at eval (shadow.min.js?eb17:1)
    at eval (shadow.min.js?eb17:1)
    at eval (shadow.min.js?eb17:1)
    at Object../node_modules/vue-shadow-dom/dist/shadow.min.js (chunk-vendors.js:12342)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (main.js:50)
    at Module../src/main.js (app.js:1520)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)

Am I missing anything here?

Could not find a declaration file for module 'vue-shadow-dom'

Using shadow with browser modules

When using browser modules and importmap the naming (dist/shadow.esm-browser.mjs) is misleading and results in the following error:

shadow.esm-browser.mjs:1 Uncaught TypeError: Cannot destructure property 'defineComponent' of 'globalThis.Vue' as it is undefined.
    at shadow.esm-browser.mjs:1:9

Since browser modules and importmaps are the standard now, it should be included in the documentation that the right import to use is shadow.esm-bundler.mjs.

Essentailly:

This doesn't work:

  <script type="importmap">
    {
      "imports": {
        "vue": "/package/vue/dist/vue.esm-browser.js",
        "vue-shadow-dom": "/package/vue-shadow-dom/dist/shadow.esm-browser.mjs"
      }
    }
  </script>

  <script type="module">
  import { createApp } from 'vue'
  import shadow from 'vue-shadow-root'

  createApp(...).use(shadow).mount(...)
  </script>

but this does:

  <script type="importmap">
    {
      "imports": {
        "vue": "/package/vue/dist/vue.esm-browser.js",
        "vue-shadow-dom": "/package/vue-shadow-dom/dist/shadow.esm-bundler.mjs"
      }
    }
  </script>

  <script type="module">
  import { createApp } from 'vue'
  import shadow from 'vue-shadow-root'

  createApp(...).use(shadow).mount(...)
  </script>

This thing's awesome!

I'm building a drag and drop editor and this saves me from having to use an iframe to isolate styles! Thanks so much!

[Vue 2] Use Component Styles

I don't know if theres an existing issue about this but is there anyway to use component styles?

<shadow-root>
   <CustomComponent /> // use styles that are inside the vue file
   <p>123</p>
</shadow-root>

TypeError: t.attachShadow is not a function

Hey, I get this error "TypeError: t.attachShadow is not a function" thrown in the file "node_modules/vue-shadow-dom/dist/shadow.min.js". Since I'm still using Vue2, I use version 1. This error only occurs with browsers that don't support attachShadow.
Is there a way to catch this error?

How to set styles for the shadow-root?

It's not clear to me how I can define styles for a shadow-root. It would be great if the documentation could cover this use-case.