In one of my polymer 3 components, I have declared an object property as follows:
static get properties(): myInferface {
return {
myObject: {
type: Object,
notify: true,
value: {
showMe: false,
text: '',
text2: ''
}
}
};
}
For rendering, I use the following template:
static get template() {
return html`
<template is="dom-if" if={{myObject.showMe}}>
<p>{{myObject.text}}</p>
<p>{{myObject.text2}}</p>
</template>
`;
To define the component, I use the following code:
window.customElements.define('myComp', myClass);
Initially, nothing will be displayed as the default value of myObject.showMe is false.
When I import this component into another one and try to set the properties, it does not work:
<myComp>
myObject= {{
showMe: true,
text: "aaa",
text2: "bbb"
}}
</myComp>
I have also tried the following approach, but it still does not work. What could be the issue?