web components

directory structure

|- application
    |- imports
    hp.html (base element; includes polymer)
    avatar.html
    share.html
|- components
    |- profile
        |- imports
        index.html

profile component template

<hp-profile>
    <hp-avatar img="{{avatar}}">
        {{#each social}}
            <hp-share type="{{service}}" />
        {{/each}}
    </hp-avatar>
</hp-profile>

profile import

<link rel="import" href="/app/imports/avatar.html">
<link rel="import" href="/app/imports/share.html">

<polymer-element name="hp-profile" noscript>
    <template>
        <p>I am the Happy Pancake profile element!</p>
    </template>
</polymer-element>