Best Practice for using attributes vs lightDOM for content

[won...@gmail.com]

I was wondering if there were any best practices for when attributes/databinding should be used to pass information, and when that information should be passed as light DOM to be inserted using a <content> tag. 

More specifically, I want to display a contact's information: 

Before polymer, this would have look like:

<span class="contact">

    <img src="picture">

    <span class="information">

        <div class= "name">DennisJeong</div>

        <div class="phoneNumber">123456789</div>

    </span>

<span> 

Now, I'm wondering whether it should be: 

1.

<custom-contact picture-src="{{contactPic}}" name="{{contactName}}" phoneNumber="{{contactNum}}"></customContact>

with a shadow dom that looks like the pre-polymer information above.

or

2. 

<custom-contact> 

    <img src="{{contactPic}}" picture>

    <div name>{{contactName}}</div>

    <div number>{{contactNum}}</div>

</custom-contact>

with the proper content tags putting those in the proper place using attribute selectors? 

Thanks,

Dennis

[Michael Bleigh]

My rule of thumb is that if it's a short, single-line value it works better as an attribute. For one thing, <content> is harder to style and you're then committing your users to remembering a more complex structure.

I mostly use <content> only when I want actual HTML, not just text.

That's just how I've been building, others may disagree.