feat: allow custom opts. resolves #97

src/index.js

@@ -9,7 +9,11 @@ import {
   convertAttributeValue
 } from './utils.js'
 
-export default function wrap (Vue, Component) {
+const defaults = {
+  shadowMode: 'open'
+}
+
+export default function wrap (Vue, Component, { shadowMode } = defaults) {
   const isAsync = typeof Component === 'function' && !Component.cid
   let isInitialized = false
   let hyphenatedPropsList
@@ -81,7 +85,7 @@ export default function wrap (Vue, Component) {
   class CustomElement extends HTMLElement {
     constructor () {
       const self = super()
-      self.attachShadow({ mode: 'open' })
+      self.attachShadow({ mode: shadowMode })
 
       const wrapper = self._wrapper = new Vue({
         name: 'shadow-root',

test/fixtures/options.html

@@ -0,0 +1,10 @@
+<script src="../../node_modules/vue/dist/vue.js"></script>
+<script type="module">
+import wrap from '../../src/index.js'
+
+customElements.define('my-element', wrap(Vue, { template: `<div></div>` }, { shadowMode: 'closed' }))
+
+window.el = document.querySelector('my-element')
+</script>
+
+<my-element></my-element>

test/test.js

@@ -107,6 +107,14 @@ test('lifecycle', async () => {
   expect(logs).toContain('activated')
 })
 
+test('options', async () => {
+  const { page } = await launchPage(`options`)
+
+  expect(await page.evaluate(() => {
+    return document.querySelector('my-element').shadowRoot
+  })).toBeNull()
+})
+
 test('async', async () => {
   const { page } = await launchPage(`async`)
 

types/index.d.ts

@@ -2,7 +2,8 @@ import _Vue, { Component, AsyncComponent } from 'vue'
 
 declare function wrap(
   Vue: typeof _Vue,
-  Component: Component | AsyncComponent
+  Component: Component | AsyncComponent,
+  options: { shadowMode?: 'closed' | 'open' }
 ): HTMLElement
 
-export default wrap
+export default wrap