I'm stuck with one simple problem in Polymer 2.x. I don't know how to set correctly a value of my custom element properties from another elements class.

My code:

<dom-module id="cookbook-wall"> <template> <style> // my styling </style> <div class="wall"> <template is="dom-repeat" items="[[_getRecipesList()]]"> <cookbook-recipe-card name="recipe-card"></cookbook-recipe-card> </template> </div> </template> <script> class CookbookWall extends Polymer.Element { static get is() { return 'cookbook-wall'; } static get properties() { // this property is unused now, I tried to set it dynamically from // method below but it also failed return { recipes: Array } } _getRecipesList() { var test = new CookbookRecipeCard(); test.setData("This is test title", "This is test content"); return [test, test, test]; } } window.customElements.define(CookbookWall.is, CookbookWall); </script>

and

<dom-module id="cookbook-recipe-card"> <template> <style include="shared-styles"> // my styling </style> <div class="card"> <div id="titleContent">{{title}}</div> <div class="my-block"> <div class="contentCaption">Treść przepisu:</div> <div class="content">{{content}}</div> </div> </div> </template> <script> class CookbookRecipeCard extends Polymer.Element { static get is() { return 'cookbook-recipe-card'; } static get properties() { return { myName: String, myContent: String } } setData(myTitle, myContent) { this.myTitle = myTitle; this.myContent = myContent; } } window.customElements.define(CookbookRecipeCard.is, CookbookRecipeCard); </script>

As can u see I want do do sth like: setData(myTitle, myContent) from another elements class, but it doesn't work. Is there any way to achieve similar result as with traditional setter in object-oriented languages in Polymer?

Thanks for any help!

EDIT (My solution):

I deleted my custom card component and just used normal paper-card: