diff --git a/src/index.js b/src/index.js
index 4409bd7..0f14996 100644
--- a/src/index.js
+++ b/src/index.js
@@ -152,6 +152,12 @@ export default function wrap (Vue, Component) {
}
initialize(resolved)
syncInitialAttributes()
+ // sync existing element properties with props
+ camelizedPropsList.forEach(prop => {
+ if (typeof this[prop] !== 'undefined') {
+ wrapper.props[prop] = this[prop]
+ }
+ })
})
}
// initialize children
diff --git a/test/.eslintrc b/test/.eslintrc
new file mode 100644
index 0000000..d36a491
--- /dev/null
+++ b/test/.eslintrc
@@ -0,0 +1,9 @@
+{
+ "env": {
+ "jest": true
+ },
+ "globals": {
+ "el": true,
+ "els": true
+ }
+}
diff --git a/test/fixtures/async.html b/test/fixtures/async.html
index c0fb681..3627f92 100644
--- a/test/fixtures/async.html
+++ b/test/fixtures/async.html
@@ -5,7 +5,7 @@
const Component = () => new Promise(resolve => {
setTimeout(() => {
resolve({
- template: `
{{ foo }} {{ someProp }}
`,
+ template: `{{ foo }} {{ someProp }} {{ extraProp.value }}
`,
props: {
foo: {
type: Number,
@@ -14,6 +14,10 @@
'some-prop': {
type: String,
default: 'bar'
+ },
+ extraProp: {
+ type: Object,
+ default: () => ({value: 'banana'})
}
}
})
@@ -26,6 +30,7 @@
customElements.define('my-element', wrap(Vue, Component))
window.els = document.querySelectorAll('my-element')
+window.els[1].extraProp = {value: 'apple'}
diff --git a/test/test.js b/test/test.js
index 9423d7a..cc1fe2c 100644
--- a/test/test.js
+++ b/test/test.js
@@ -16,9 +16,9 @@ test('properties', async () => {
el.foo = 234
el.someProp = 'lol'
})
- const newFoo = await page.evaluate(() => el.vueComponent.foo)
+ const newFoo = await page.evaluate(() => el.vueComponent.foo)
expect(newFoo).toBe(234)
- const newBar = await page.evaluate(() => el.vueComponent.someProp)
+ const newBar = await page.evaluate(() => el.vueComponent.someProp)
expect(newBar).toBe('lol')
})
@@ -114,6 +114,9 @@ test('async', async () => {
expect(await page.evaluate(() => els[0].shadowRoot.textContent)).toMatch(`123 bar`)
expect(await page.evaluate(() => els[1].shadowRoot.textContent)).toMatch(`234 baz`)
+ // props assigned as node properties should be synced
+ expect(await page.evaluate(() => els[1].shadowRoot.textContent)).toMatch(`apple`)
+
// attribute sync should work
await page.evaluate(() => {
els[0].setAttribute('foo', '345')