Creating Custom Web Elements with Polymer

38 minutes

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!

pro-course-rss-logo

PRO RSS Feed

Polymer Custom Elements: Introduction

Polymer Custom Elements: Lifecycle Callbacks

P

Polymer Custom Elements: Styling

P

Polymer Custom Elements: Extend Native HTML Elements

P

Polymer Custom Elements: Declared Property Basics

P

Polymer Custom Elements: Data Binding

P

Polymer Custom Elements: Property Change Observers

P

Polymer Custom Elements: Event Listeners

P

Polymer Custom Elements: Custom Events

P

Polymer Custom Elements: dom-repeat

P
js tutorial about Polymer Custom Elements: Introduction

Polymer Custom Elements: Introduction

4:20 js

In this lesson we'll install Polymer and explore creating our first custom element

js tutorial about Polymer Custom Elements: Lifecycle Callbacks

Polymer Custom Elements: Lifecycle Callbacks

5:49 js PRO

In this lesson we'll look at the lifecycle callbacks available to us in Polymer and how to use each one.

js tutorial about Polymer Custom Elements: Styling

Polymer Custom Elements: Styling

5:55 js 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.

js tutorial about Polymer Custom Elements: Extend Native HTML Elements

Polymer Custom Elements: Extend Native HTML Elements

3:11 js 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.

js tutorial about Polymer Custom Elements: Declared Property Basics

Polymer Custom Elements: Declared Property Basics

4:31 js PRO

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

js tutorial about Polymer Custom Elements: Data Binding

Polymer Custom Elements: Data Binding

5:12 js 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.

js tutorial about Polymer Custom Elements: Property Change Observers

Polymer Custom Elements: Property Change Observers

1:57 js 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.

js tutorial about Polymer Custom Elements: Event Listeners

Polymer Custom Elements: Event Listeners

1:32 js 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.

js tutorial about Polymer Custom Elements: Custom Events

Polymer Custom Elements: Custom Events

3:08 js 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.

js tutorial about Polymer Custom Elements: dom-repeat

Polymer Custom Elements: dom-repeat

2:49 js 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.

Presented by:

Joe Maddalone

Joe is a father of five, lives in Chicago, works as a freelance web developer, shares coding tutorials on egghead.io, and codes for fun when not for work.

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