Week 4 | Including The Hello Element

polymer 1.0
Mon Sep 19 2016

In our previous week’s demo we declared and reused a super simple element named “Hello Element” on our main page.

This week in our super simple demo we will include this element through a separate page.
To do so we’ll just extract the component declaration and add it in a new page named “hello-element.html”.

Then we’ll just include the element with the rel=”import” attribute. Have in mind that we can include the Polymer reference in our element. This way once the hello-element is loaded it will load all of its resources as well. This will work like a waterfall and once all of the resource chain is loaded it will declare that element. Also, if a resource is loaded from one element and is used from another element as well it won’t load twice. So, you can always include the resource paths you desire such as the Polymer library and the browser will be smart enough to load them when needed and only once per page load.

The Plunkr demo: https://plnkr.co/edit/hY4qYzfpUcOPCxQ2hbXw?p=preview

Our Index.html page

<!DOCTYPE html>
<html>

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

  <body unresolved>
    
    <hello-element></hello-element>

  </body>

</html>

and our elements/hello-element.html page

<link rel="import" href="https://polygit.org/components/polymer/polymer.html" />
    
<dom-module id="hello-element">
  <template>Hello there</template>
</dom-module>

<script>
  Polymer({
    is: "hello-element"
  })
</script>

 

Full Stack Weekly Newsletter

A free weekly newsletter for full stack web developers!