Meet the Team

Whats interesting about this is not the actual implementation of the flip etc but the fact that the behaviour is now abstracted away into an external resource, and that we can choose what is exposed to that resource. Here's how it works:

• The webcomponents polyfill script is included in the head of the page.
• The custom component is imported (in this case from an external domain) using a link rel="import" in the document head:

                          <link rel="import" href="https://fiery-torch-7498.firebaseapp.com/faceflip.html">
                      

• Each of the "face-flip" instances in the page are marked up like so:

                          <face-flip>
                              <span class="title">Managing Director</span>
                              <span class="name">Bob Baboon</span>
                              <img src="images/baboon_suit.jpg"/>
                          </face-flip>
                      

  So a very simple structure, a couple of spans and an image - the minimum unique elements for each instance.

• All of the logic and presentation around the "face-flip" element is contained in the imported component, including css, script and markup. (View source of faceflip.html for full code). Within the component is a template tag:

                          <template>
                              <div class="face-flip-container" onclick="this.classList.toggle('flipped');">
                                  <div class="front">
                                      <h2>
                                          <content select=".title"></content>
                                          <content select=".name"></content>
                                      </h2>
                                  </div>
                                  <div class="back">
                                      <content select="img"></content>
                                  </div>
                              </div>
                          </template>
                      

  The markup within each face-flip tag is injected into the content tags, ie: <content select=".title"></content>

This type of distributed/syndicated/franchised content is a huge part of the business model of the web and Polymer/web components have great potential in this area.