Merge pull request #1 from EranGrin/feature-suggestion/add-attribute-before-root-vue-render

EranGrin · web-flow · commit 365b69be1fb7 · 2020-10-23T20:52:53.000+02:00
Feature suggestion/add attribute before root vue render
diff --git a/README.md b/README.md
@@ -46,6 +46,19 @@ const CustomElement = wrap(Vue, () => import(`MyComponent.vue`))
 
 window.customElements.define('my-element', CustomElement)
 ```
+### Usage with addtional attributes
+```js
+const vueAttributeBeforeRender = {
+        i18n:{ locale: 'de' },
+        foo:{ bar: 'test' },
+}; 
+
+const CustomElement = wrap(Vue, Component, vueAttributeBeforeRender)
+```
+This will add the attribute to the 
+```js  
+new Vue({ // attributes }) 
+```
 
 ## Interface Proxying Details
 
diff --git a/src/index.js b/src/index.js
@@ -9,7 +9,7 @@ import {
   convertAttributeValue
 } from './utils.js'
 
-export default function wrap (Vue, Component) {
+export default function wrap (Vue, Component, vueAttributeBeforeRender) {
   const isAsync = typeof Component === 'function' && !Component.cid
   let isInitialized = false
   let hyphenatedPropsList
@@ -83,23 +83,28 @@ export default function wrap (Vue, Component) {
       const self = super()
       self.attachShadow({ mode: 'open' })
 
-      const wrapper = self._wrapper = new Vue({
-        name: 'shadow-root',
-        customElement: self,
-        shadowRoot: self.shadowRoot,
-        data () {
-          return {
-            props: {},
-            slotChildren: []
+      const wrapper = self._wrapper = new Vue(
+        Object.assign(
+          vueAttributeBeforeRender, {
+            name: 'shadow-root',
+            customElement: self,
+            shadowRoot: self.shadowRoot,
+
+            data () {
+              return {
+                props: {},
+                slotChildren: []
+              }
+            },
+
+            render (h) {
+              return h(Component, {
+                ref: 'inner',
+                props: this.props
+              }, this.slotChildren)
+            }
           }
-        },
-        render (h) {
-          return h(Component, {
-            ref: 'inner',
-            props: this.props
-          }, this.slotChildren)
-        }
-      })
+        ))
 
       // Use MutationObserver to react to future attribute & slot content change
       const observer = new MutationObserver(mutations => {
