Creating Custom Web Elements with Polymer

Polymer is a framework created at Google for building reusable web components.

We use HTML elements every day such as div, a, button, form, and table. All HTML elements provide some sort of API of attributes, properties, methods and events that we use to manipulate them. Generally, web elements are styled in a particular way by default, and also allow us to customize their styling with CSS.

Polymer allows you to build fully custom web elements of your own for more complex components composed of the building blocks you are used to with the standard set of HTML elements.

This course is an introduction to Polymer, and should get you started building your own customizable web elements that you can use on their own, or even with your favorite framework like Angular or React!

Watch User Created Playlist (10)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Create a Custom Element using Polymer

Use Lifecycle Callbacks On Custom Polymer Elements

P

Style Custom Elements in Polymer

P

Extend Native HTML Elements with Polymer

P

Understand Declared Property Basics in Polymer

P

Data Bind Two Polymer Elements

P

Observe Property Changes on a Custom Polymer Element

P

Create Event Listeners in Polymer Elements

P

Execute Custom Events in Polymer

P

Iterate over a Collection with Polymer's dom-repeate

P
polymer tutorial about Create a Custom Element using Polymer

Create a Custom Element using Polymer

4:20 polymer

In this lesson we'll install Polymer using bower and explore creating our first custom element. We will use the dom-module to create our first Element and add an event listener to watch for the keyup event.

polymer tutorial about Use Lifecycle Callbacks On Custom Polymer Elements

Use Lifecycle Callbacks On Custom Polymer Elements

5:49 polymer PRO

In this lesson we'll look at the lifecycle callbacks (Created, Ready, Attached, Detached, and attributeChanged) available to us in Polymer and how to use each one.

polymer tutorial about Style Custom Elements in Polymer

Style Custom Elements in Polymer

5:55 polymer PRO

In this lesson we'll look at how to isolate the style of our custom element, use the ":host" selector, and create css variables in order to theme our element.

polymer tutorial about Extend Native HTML Elements with Polymer

Extend Native HTML Elements with Polymer

3:11 polymer PRO

Polymer allows us to extend a native HTML elements UI or functionality. In this lesson we'll use a button as our custom element basis and add new UI and functionality to it that can be added to any button in our application.

polymer tutorial about Understand Declared Property Basics in Polymer

Understand Declared Property Basics in Polymer

4:31 polymer PRO

We can declare properties on our custom element which serve as a public api configurable by any user from markup.

polymer tutorial about Data Bind Two Polymer Elements

Data Bind Two Polymer Elements

5:12 polymer PRO

Polymer provides us a variety of data-binding configurations. In this lesson we'll look at configuring Two-way, One-way-down and One-way-up data binding.

polymer tutorial about Observe Property Changes on a Custom Polymer Element

Observe Property Changes on a Custom Polymer Element

1:57 polymer PRO

Custom element property changes can be observed by specifying an observer method which will be executed whenever a change occurs and receive both the new value and old value.

polymer tutorial about Create Event Listeners in Polymer Elements

Create Event Listeners in Polymer Elements

1:32 polymer PRO

In this lesson we'll look at creating event listeners in our custom element using the listeners object as well as annotated event listeners.

polymer tutorial about Execute Custom Events in Polymer

Execute Custom Events in Polymer

3:08 polymer PRO

We can utilize the "fire" method from within our custom element to execute a custom event. In this lesson we'll create a custom event and pass useful data along with the event to the consumer of our element.

polymer tutorial about Iterate over a Collection with Polymer's dom-repeate

Iterate over a Collection with Polymer's dom-repeate

2:49 polymer PRO

In this lesson we'll use the "dom-repeat" helper method in our custom element to iterate over a collection and use the built in model instantiation to update items in our collection.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?