diff --git a/README.md b/README.md index c3a58a5..4d02bd0 100644 --- 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 index 4409bd7..13a6f2f 100644 --- 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 => {