Building Native Web Components: Front-End Development with Polymer and Vue.js

© Carlos Rojas 2021

C. RojasBuilding Native Web Componentshttps://doi.org/10.1007/978-1-4842-5905-4_2

2. Custom Elements

Carlos Rojas¹ 

(1)

Medellin, Colombia

 

In this chapter, we are going to explore the Custom Elements specification in the Web Components set. You will learn what custom elements are, how to create them, and what the life cycle for custom elements is. We are then going to build a new web component for our collection.

What Are Custom Elements?

Custom Elements is a mechanism that web developers can use to create new HTML tags. We can create our tags by using the CustomElementRegistry object. For example, we can define a random-icon-placeholder, as in Listing 2-1.

class randomIconPlaceholder extends HTMLElement {

    constructor(){...}

}