Week 3 | The Hello Element

polymer 1.0
Mon Sep 12 2016

In this demo we will create an extremely simple Polymer Element to check out its different structural parts.

First we have to include Polymer (more on this in the previous demo).

Then we have two parts the imperative and declarative.
The imperative consists of a script area where we declare our element and will later on include its various properties and methods.
Also, when you include your declaration in the index.html page you’ll have to wrap everything in the HTMLImports.whenReady callback to make sure
that everything loads once all of the html imports are done.

Lastly, we have the declarative are wrapped in the <dom-module> element. So Polymer uses an element to declare another element, isn’t that cool?
In this area we’ll include the template tag and Polymer will copy and paste the HTML located in the template tag in our element.

So, we would expect the “Hello there” message to appear in the <hello-element> element, which is the case if you check out the Live Demo!

<!DOCTYPE html>
<html>

  <head>
    <script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="https://polygit.org/components/polymer/polymer.html" />
  </head>

  <body>
    
    <hello-element></hello-element>
    
    <dom-module id="hello-element">
      <template>Hello there</template>
    </dom-module>
    
    <script>
      HTMLImports.whenReady(function(){
        Polymer({
          is: "hello-element"
        })
      })  
    </script>
    
  </body>

</html>

 

Full Stack Weekly Newsletter

A free weekly newsletter for full stack web developers!