refactor: shadowRoot

Author: yyx990803

src/index.js

@@ -42,9 +42,11 @@ export default function wrap (Vue, Component) {
 
     constructor () {
       super()
+      this.attachShadow({ mode: 'open' })
       const wrapper = this._wrapper = new Vue({
         name: 'shadow-root',
         customElement: this,
+        shadowRoot: this.shadowRoot,
         data () {
           return {
             props: getInitialProps(camelizedPropsList),
@@ -81,8 +83,6 @@ export default function wrap (Vue, Component) {
     connectedCallback () {
       const wrapper = this._wrapper
       if (!wrapper._isMounted) {
-        this._shadowRoot = this.attachShadow({ mode: 'open' })
-        wrapper.$options.shadowRoot = this._shadowRoot
         // initialize children
         wrapper.slotChildren = Object.freeze(toVNodes(
           wrapper.$createElement,
@@ -93,7 +93,7 @@ export default function wrap (Vue, Component) {
         camelizedPropsList.forEach(key => {
           wrapper.props[key] = this.vueComponent[key]
         })
-        this._shadowRoot.appendChild(wrapper.$el)
+        this.shadowRoot.appendChild(wrapper.$el)
       } else {
         callHooks(this.vueComponent, 'activated')
       }

test/test.js

@@ -88,7 +88,7 @@ test('attributes', async () => {
 test('events', async () => {
   const { page } = await launchPage(`events`)
   await page.evaluate(() => {
-    el._shadowRoot.querySelector('button').click()
+    el.shadowRoot.querySelector('button').click()
   })
   expect(await page.evaluate(() => window.emitted)).toBe(true)
   expect(await page.evaluate(() => window.emittedDetail)).toEqual([123])
@@ -98,7 +98,7 @@ test('slots', async () => {
   const { page } = await launchPage(`slots`)
 
   const content = await page.evaluate(() => {
-    return el._shadowRoot.querySelector('div').innerHTML
+    return el.shadowRoot.querySelector('div').innerHTML
   })
   expect(content).toMatch(`<div>default</div><div>foo</div>`)
 
@@ -107,7 +107,7 @@ test('slots', async () => {
     el.innerHTML = `<div>default2</div><div slot="foo">foo2</div>`
   })
   const newContent = await page.evaluate(() => {
-    return el._shadowRoot.querySelector('div').innerHTML
+    return el.shadowRoot.querySelector('div').innerHTML
   })
   expect(newContent).toMatch(`<div>default2</div><div>foo2</div>`)
 })