I have a web component library built using litElement. We are using these components in a React project and are running into an issue using some of the property binding attribute features. React is throwing an error when using the below syntax.
Property binding examples can be seen here using
.attr="" and ?attr=""
https://lit-element.polymer-project.org/guide/templates
Is there a way to use these property bindings inside a React app with a prefixed "." or "?". I am currently aware that we can use JSON.stringify to pass objects as a string to the attribute but would rather pass the objects as a property vs an attribute.
<my-cust-component .model="${this.someObj} ?mybool="false">
Is there a way to use these property bindings inside a React app with a prefixed "." or "?"
Short answer: no.
The first reason is that those syntaxes are lit-specific constructs that you can only use in its rendering context (inside the template of the WebComponent). The other bad news is that React's peculiar view of DOM and rendering make it one of the most WC-incompatible frameworks: you'll have to rely on attributes and refs to communicate with your web components, no property and event binding.