From 2ebf8a43bc78618299066ca96bb9d2b3965c61f0 Mon Sep 17 00:00:00 2001
From: Beau August <10343831+BeauAgst@users.noreply.github.com>
Date: Tue, 23 Feb 2021 21:16:36 +0000
Subject: [PATCH 1/3] feat: allow custom opts. resolves #97

---
 src/index.js               |  8 ++++++--
 test/fixtures/options.html | 10 ++++++++++
 test/test.js               |  8 ++++++++
 types/index.d.ts           |  5 +++--
 4 files changed, 27 insertions(+), 4 deletions(-)
 create mode 100644 test/fixtures/options.html

diff --git a/src/index.js b/src/index.js
index 4409bd7..d30bb50 100644
--- a/src/index.js
+++ b/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',
diff --git a/test/fixtures/options.html b/test/fixtures/options.html
new file mode 100644
index 0000000..f577b9f
--- /dev/null
+++ b/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>
diff --git a/test/test.js b/test/test.js
index 9f60f7f..7cccfa2 100644
--- a/test/test.js
+++ b/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.querySelectorAll('my-element')[2].shadowRoot
+  })).toBeNull()
+})
+
 test('async', async () => {
   const { page } = await launchPage(`async`)
 
diff --git a/types/index.d.ts b/types/index.d.ts
index 8b67b7b..09a31e9 100644
--- a/types/index.d.ts
+++ b/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
\ No newline at end of file

From 97edd02826f5358e61c7ebc9bd2d9e586c912838 Mon Sep 17 00:00:00 2001
From: Beau August <10343831+BeauAgst@users.noreply.github.com>
Date: Tue, 23 Feb 2021 21:40:40 +0000
Subject: [PATCH 2/3] fix test

---
 test/test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/test.js b/test/test.js
index 7cccfa2..67e8bca 100644
--- a/test/test.js
+++ b/test/test.js
@@ -111,7 +111,7 @@ test('options', async () => {
   const { page } = await launchPage(`options`)
 
   expect(await page.evaluate(() => {
-    return document.querySelectorAll('my-element')[2].shadowRoot
+    return document.querySelectorAll('my-element').shadowRoot
   })).toBeNull()
 })
 

From 4a7c57db0eb10a813bfea2def858477e80c6fe95 Mon Sep 17 00:00:00 2001
From: Beau August <10343831+BeauAgst@users.noreply.github.com>
Date: Tue, 23 Feb 2021 21:42:26 +0000
Subject: [PATCH 3/3] test should only query a single element

---
 test/test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/test.js b/test/test.js
index 67e8bca..4cca6c8 100644
--- a/test/test.js
+++ b/test/test.js
@@ -111,7 +111,7 @@ test('options', async () => {
   const { page } = await launchPage(`options`)
 
   expect(await page.evaluate(() => {
-    return document.querySelectorAll('my-element').shadowRoot
+    return document.querySelector('my-element').shadowRoot
   })).toBeNull()
 })