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 @@ + + + + diff --git a/test/test.js b/test/test.js index 9f60f7f..4cca6c8 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.querySelector('my-element').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