polymerLogo

Starting with a project build with Yeoman (Yo Polymer), I add a custom element and display it in the index file. In addition, how to set up a project to build with Vulcanize and why, and how custom elements relate to the data model in Polymer is discussed.

polymerSandboxDirectory

polymerSandbox with djm-nameTag element

I madeĀ a copy of one of the existing custom elements in the Yo-Polymer base project. I replaced the contents with a nametag example element from the Polymer data binding topic on their website. I named it with djm- prefix in order to satisfy the Polymer requirement that custom element names contain a dash while also adding a namespace to it by referring to my initials.

djm_nameTag

<link rel="import" href="../../bower_components/polymer/polymer.html">

<polymer-element name="djm-nameTag" attributes="">

  <template>
    This is <b>{{owner}}</b>'s djm-nameTag element.
  </template>

  <script>
    Polymer('djm-nameTag', {
      // initialize the element's model
      ready: function() {
        this.owner = 'Rafael';
      }
    });
  </script>
</polymer-element>

Then I added the element to the index.html file body.

<djm-nameTag></djm-nameTag>

I expected to have to add an html import to the index file but there were no imports for the other elements. I realized that they were being imported via the vulcanize library method.

<!-- build:vulcanized elements/elements.vulcanized.html -->
<link rel="import" href="elements/elements.html">

I added a djm-nameTag entry to elements.html

Then when I ran

grunt build

grunt cleaned and rebuilt the dist directory and added djm-nameTag element to the elements.vulcanized.html file.

polymerSandboxDistDirectory

polymerSandbox dist directory including elements.vulcanized.html