Hands on with Web Components

This tutorial will take you through using and creating Web Components within your projects. (See Web Components,the new standard in modular HTML development)

As browsers are still undergoing development to support Web Components,Polymer will be used.Polymer is a component polyfill and library created by Google (polymer-project.org).This adds support to all modern browsers as well a host of preset components ready to use.

1.Install Node.js and Bower

The recommended way to use polymer is to install using Bower via Node.js.Make sure Node.js is installed and install Bower.The -g flag installs Bower globally too.

npm install -g bower

2.Add Polymer to your project

Now use Bower to install Polymer within your project.Make sure you are within your project directory and then install it in your CLI as shown.The ‘Bower int’ command will ensure a bower.json file is created.The ‘–save’ flag will add Polymer as a dependency within this file.

D:\Example\Web Components Feature\my-component

bower init 

bower install --save Polymer/polymer#^0.5

3.Create your first element

Use an HTML import to use Polymer to create your Custom Element using (polymer-element>.Add this as a new HTML file.The name o this element is added as an attribute and the contents help within a <template> tag.

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

<polymer-element name="my-signup" noscript>

<template>

<p>Hi this is <strong>my-signup</strong>.

You are looking at the Shadow DOM</p>

</template>

</polymer-element>

4.Create your app

Add an index.html file to your project root.Load the webcomponents.min.js polyfill from bower_components.Import your new Custom Element and then reference this.

When viewed in a browser you will see your Shadow DOM content and be able to inspect this using Chrome.

<!DOCTYPE html>

<html>

<head>

<script src="bower_components/

webcomponentsjs/webcomponents.min.js"></script>

<link rel="import" href="elements/my-signup.html">

</head>

<body>

<my-signup></my-signup>

</body>

</html>

5.Style your element

Within your element file,add a <style> tag to the template and adjust how the <p> tag is displayed.Add another <p> tag to your index.html

//elements/my-signup.html

<polymer-element name="my-signup" noscript>

<template>

<style>

p {

font-family: Verdana, sans-serif;

font-size: 1.2em;

color: #912A07;

}

</style>

<p>Hi this is <strong>my-signup

<strong>. You are looking at the Shadow DOM</p>

</template>

</polymer-element>

//index.html

<body>

<p>This text is within the page DOM and is unaffected by component styles.</p>

<my-signup></my-signup>

</body>

6.Style the element host

If you add :host as a selector to your element styles,you can style the parent element of your Shadow DOM,style the Custom Element tag in your index.html from within the element itself.

<style>

p {

font-family: Verdana, sans-serif;

font-size: 1.2em;

color: #9122A07;

}

</style>

7.Style the element from your app

Any new Custom Element can be styled from its parent page (in this case this is index.html) if you add styles to this page for your new element they will overrule those set using the :host selector,but the elements within your Shadow DOM will still be protected.

<style>

my-signup {

background-color: red;

}

my-signup  {

color: white; /* this will not work */

}

</style>

8.Overruling shadow styles

If you use:shadow you will find that any styles defined within a component can be altered.

<style>

my-signup {

background-color: red;

}

my-signup::shadow p {

color: white; /* this will work */

};

</style>

9.Build the signup form

Add the signup form markup and default styles to the template.The styles don’t affect the rest of our page so base CSS selectors can be used without conflicts.

<polymer-element name="my-signup" noscript>

<template>

<style>

:host {

display: inline-block;

component and doing something with them.Add the nameChanged method to your script and whenever it is changed,the name will be logged out in the console.

<script>

Polymer({

nameChanged: function() {

if(this.name){

console.log('Hi ' + this.name + ' i am listening!')

}

}

})

</script>

10.Add values to your inputs

Extend the input elements to have values that are set to namespaces within handlebars templating syntax.This will make any value entered available within the context of our component.You should see the ‘name’ value within the <p> tag as you type.

<p>{{name}}</p>

<div class="form-row">

<label>Name:</label>

<input type="text" id=""signup_name"

value+"{{name}}" />

</div>

11.Introduce some script

Add a <script> tag to your element,within this,call the core ‘Polymer’ class and set a default value for the {{name}} property we’ve defined in the markup.Remove the noscript attribute from the <polmer-element> tag.

<polymer-element name="my-signup">

<template>_</template>

<script>

Polymer({

name: "luke" // you can set a default value

here

})

</script>

</polymer-element>

12.Pass data to your component

If we know the user’s name we can pre populate it. Add an element attribute and include it as a listed attribute on our Polymer element (the attributes value can be a comma separated list to define multiple attributes).

//elements/my-signup.html

<polymer-element name=""my-signup"

attributes="user">

...

</polymer-element>

//index.html

<my-signup name="luke"></my-signup>

13.Watching Properties

Polymer has a range of changed watchers that are excellent for reacting to property changes within your address,this is because the email_match property does not exist until these properties are changed.Add a default value for this as true within your Polymer script.

<script>

Polymer({

email_match: true

...

})

</script>

14.Watching groups

Another change watcher Polymer provides is the ‘observe’ method.This can watch multiple properties and fire when any of them change.Add an observe list to both email properties and bind these to a validate method.The values will be logged out when changed.

<script>

Polymer({

observe: {

email: 'validate',

email_confirm: 'validate'

},

validate: function(oldVal,newVal){

console.log(newVal)

}

})

</script>

15.Match the email fields

This can now be used to validate that both email fields match.Adjust the ‘validate’ function to check the fields against each other and create a new email_match properly within the component for tracking the fields.

validate: function(oldVal,newVal){

if(this.email === this.email_confirm){

this.email_match = true;

}

else{

this.email_match = false;

}

console.log(this.email_match);

}

16.Display an error

add an error message within the element to be displayed to the user.use the ‘hidden’ attribute bound to our email_match property.This only appears when the emails don’t match.We have field match validation here.

<div class="form-row">

<label>Confirm Email:</label>

<input type="Email" id=""signup_email_confirm" value="{{email_confirm}}" />

<span hidden?="{{email_match}}">Your email addresses do not match </span>

</div>

17.Set default validation

You may notice that the error message is appearing before the user has even started to enter an email address,this is because the email_match property does not exist until these properties are changed.Add a default value for this as true within your polymer script.

<script>

Polymer({

email_match: true

...

})

</script>

18.Style the validation

Add some further styles within your element to display the error message to go along side the ‘Confirm your email’field.Again there is no need for a specific error class here as this is the only instance of a <span> tag within the component.

span {

font-family: Verdana, sans-serif;

font-size: 0.8em;

display: block;

width: 294px;

margin-left: 148px;

19.Add a submit method

Now add a submit function and bind to an on-click event on the button.Within this function bring the name and email properties together so that they are ready to be posted to a HTTP service.

submitForm: function(){

this.formData = {

20.Use Polymer core elements

Polymer has a range of core elements that can be used.We will utilise the core-ajax element and this will enable us to POST the form data to a web service.All you have to do is import the core-components-page.html into your element and add the element to your HTML with the form data set as the body attribute.

<link rel="import" href="../bower_components/core-component-page/core-component-page.html">

21.Make the POST url dynamic

To use this signup element in multiple instances you will need to be able to change the POST url.Make sure that you add this as an attribute on the element in index.html,extend the listed attributes on the polymer element itself and finally reference this property in the core-ajax element.

//index.html

<my-signup name="Luke" url="http://dummypostservice.com"></my-signup>

22.POST your data to a service

Finally add a handleResponse function to your script and call the ‘go’ method on the <core-ajax> element within your formSubmit function.This will POST the form Data and the response will then be returned to the given method (you will need a POST service available to fully run this last step,but you can stub it using Node.js).

About the author

Asif Amod

I am a webtrepreneur, full stack developer and a technology evangelist. I have been coding from a young age. I also speak to databases and make servers do what I say, I am passionate about continuous learning. I thrive on challenges that require lateral thinking - no matter what language or technology. I have founded and Co-founded a number of startups and have created SaaS web applications for different industries. I am currently open to discussing and explore other opportunities.

Add comment

By Asif Amod

About Me

I am a webtrepreneur, full stack developer and a technology evangelist. I have been coding from a young age. I also speak to databases and make servers do what I say, I am passionate about continuous learning. I thrive on challenges that require lateral thinking – no matter what language or technology. I have founded and Co-founded a number of startups and have created SaaS web applications for different industries. I am currently open to discussing and explore other opportunities.

Member of The Internet Defense League

Recent Posts

Top Posts & Pages

DON’T MISS OUT!
Subscribe to my Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.
close-link
Sign up to my newsletter to receive weekly updates
Subscribe