search

sreenaths / vue3-webcomponent-wrapper-demo

Demo app for vue3-webcomponent-wrapper
Apache License 2.0
3 stars 4 forks source link

Type Number is string #1

Closed DrMabuse23 closed 3 years ago

DrMabuse23 commented 3 years ago

Hello i try this demo and i get

Screenshot 2021-03-24 at 06 38 10

this warning, did you know why this is happens ? why it couldnt be a number ?

but my real question is i cant see a shadow-dom you have any plans to add this and changing the build process to apply the styles ?

thx in advance

sreenaths commented 3 years ago

@DrMabuse23 That warning is expected. Vue performs a type check on the incoming props. In the demo component, prop type is defined as Number @ https://github.com/sreenaths/vue3-webcomponent-wrapper-demo/blob/main/src/components/Counter.vue#L12

For simplicity of the demo, we are passing the prop directly as HTML attribute @ https://github.com/sreenaths/vue3-webcomponent-wrapper-demo/blob/main/public/index.html#L11 On passing as HTML attributes, value is converted to string before passing into the component. Hence the above warning.

To avoid the warning, you can pass the prop as number using javascript. Same can be used for object or any other data type. document.getElementsByTagName("demo-counter")[0].value = 3;