fix: customElement constructor for compatibility with other polyfills (#27)

zoeyfyi · yyx990803 · commit 166f6fce7a0b · 2018-08-20T13:35:39.000-04:00
diff --git a/src/index.js b/src/index.js
@@ -80,13 +80,13 @@ export default function wrap (Vue, Component) {
 
   class CustomElement extends HTMLElement {
     constructor () {
-      super()
-      this.attachShadow({ mode: 'open' })
+      const self = super()
+      self.attachShadow({ mode: 'open' })
 
-      const wrapper = this._wrapper = new Vue({
+      const wrapper = self._wrapper = new Vue({
         name: 'shadow-root',
-        customElement: this,
-        shadowRoot: this.shadowRoot,
+        customElement: self,
+        shadowRoot: self.shadowRoot,
         data () {
           return {
             props: {},
@@ -106,20 +106,20 @@ export default function wrap (Vue, Component) {
         let hasChildrenChange = false
         for (let i = 0; i < mutations.length; i++) {
           const m = mutations[i]
-          if (isInitialized && m.type === 'attributes' && m.target === this) {
-            syncAttribute(this, m.attributeName)
+          if (isInitialized && m.type === 'attributes' && m.target === self) {
+            syncAttribute(self, m.attributeName)
           } else {
             hasChildrenChange = true
           }
         }
         if (hasChildrenChange) {
           wrapper.slotChildren = Object.freeze(toVNodes(
             wrapper.$createElement,
-            this.childNodes
+            self.childNodes
           ))
         }
       })
-      observer.observe(this, {
+      observer.observe(self, {
         childList: true,
         subtree: true,
         characterData: true,
