binding a webcomponent in a webcomponent

I have difficulties to grasp the idea of reusing web components… Let’s say I want to build a UI that has a grid of Persons from a table and to the right we see the detail of a selected person. But part of that detail is reusable in another UI (the person-badge), so I want to create a separate web component for this. Is this a good use case? How to do the binding? What can I read best to learn more about solving this UI problem?

When I have a web component “person-badge” (picture of a person with first and lastname to the right, responsive so I put it in a vaadin-board) with the following template:


<template>
<div>
<vaadin-board>
 <vaadin-board-row>
  <div>
   <img width="150px" id="photo" src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/user.png">
  </div>
  <vaadin-form-layout>
   <vaadin-text-field label="First name" id="firstname"></vaadin-text-field>
   <vaadin-text-field label="Last name" id="lastname"></vaadin-text-field>
  </vaadin-form-layout>
 </vaadin-board-row>
</vaadin-board>
</div>
</template>

And I want to use this in another webcomponent “person-form”, let’s say in this form we show one extra field email below the badge…

<template>
<vaadin-board>
 <vaadin-board-row>
	<person-badge id="badge"></person-badge>
 </vaadin-board-row>
 <vaadin-board-row>
  <vaadin-form-layout>
   <vaadin-text-field label="e-mail" id="email"></vaadin-text-field>
  </vaadin-form-layout>
 </vaadin-board-row>
</vaadin-board>
</template>

What is the correct way to bind the firstname of the badge?
My gut-feeling makes me want to do the following:
@Id(“badge.firstname”)
private String firstname;

But that does not work… Should I use a <slot></slot>? That feels awkward… When using designer you just drag the person-badge component in the person-form, feels good.

Best regards,
Yuri

Hi Yuri!

Definitely sounds like a good use case to “componentize” the “person-badge” part.

For the bindings, you should expose a JS property/attribute from that person-badge component as a public API for it. Then you can use regular data binding for that property.

Internally in the person-badge component, you can then use that property to populate the correct place in the DOM. This is easy to do with most web component libraries, such as Polymer.

Ok, thank you Jouni.
I’ll try to get it working.

For anyone struggling with Polymer Web Components this is a helpful video tutorial:
https://www.youtube.com/watch?v=NU4TGxYZEjs&list=PLNYkxOF6rcIDdS7HWIC_BYRunV6MHs5xo&index=5