InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

Web components and Polymer

  • HTML import
  • polymer installation
  • HTML5 shadow dom
  • custom tag
 
  • Home
  • > Tutorials
  • > Web Development
  • > Web components

Polymer custom element tag – hello world tutorial

on Feb 27, 2016

Polymer is a web components library and can be used to create custom elements. The library works on all major browsers (using polyfills) even if a browser does not support web components.

Install polymer

Assuming you have bower installed, run the following to create a project with polymer dependencies.

$ cd my_polymer_project
$ bower init ## pick any project name, etc. or keep defaults
$ bower install polymer --save

Note that the following directories will be created.

  • bower_components/webcomponentsjs/
  • bower_components/polymer/

Create custom element using polymer

Create am html file (say index.html) with the following code. You may have to change the path of bower_components depending upon how you run the main index.html file.

<script src="/lib/polymer-1.3.0/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/lib/polymer-1.3.0/bower_components/polymer/polymer.html">

<h2>Polymer custom element outcome</h2>
<my-element></my-element>
<script>
window.addEventListener('WebComponentsReady', function() {
  Polymer({
    is: "my-element",
    ready: function() {
      this.innerHTML = "<p>Hello world from Polymer</p>";
    }
  });
});
</script>
refresh done
try it online

Few points to note

  1. We need to wait for WebComponentsReady event before we define out custom element. This is to ensure that all web components are ready before we use them.
  2. The element name must have a dash in it.
  3. We could have put the custom code in a separate element html (say my-element.html) and imported it from main file (say index.html). Here is how my-element.html will look like with that approach:
    <link rel="import"
          href="/lib/polymer-1.3.0/bower_components/polymer/polymer.html">
    <script>
      Polymer({
        is: "my-element",
        ready: function() {
          this.innerHTML = "<p>Hello world from Polymer</p>";
        }
      });
    </script>
    

    And here is the main index.html file and its rendered outcome.

    <script src="/lib/polymer-1.3.0/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="/lib/polymer-1.3.0/bower_components/polymer/polymer.html">
    <link rel="import" href="/demo2/polymer/my-element.html">
    
    <h2>Polymer custom element outcome</h2>
    <my-element></my-element>
    refresh done

Suggested posts:

  1. How to install polymer
  2. bower – installation and quick start guide
  3. How to display wordpress page list with specific custom field value
  4. HTML5 template tag hello world tutorial
  5. Chrome extension tutorial – hello world
  6. How to use google custom search for wordpress site
  7. HTML5 shadow dom example
  8. React javascript render hello world
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged Tutorials, Web components

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2023 InfoHeap.

Powered by WordPress