Web Components bookmarks

Autonomous vs Customized Elements

Choosing a type of component to build depends on a lot of factors. Here are some considerations to think about.

Creating a Custom Element from Scratch

This article describes how to create a custom modal dialog from the ground up using a <template> element.

Defining a Component

Creating a JavaScript class and registering it in the Custom Elements Registry to make the browser use it.

Initializing Your Component

Components can have styles, template, state etc. All these things need to be initialized using different techniques.

Lifecycle Reference

Custom Elements have several method names which are called periodically through the life cycle of the element.

Naming your components

Requirements for a valid tag name, and some tips and tricks on how to pick a good name for a custom element.

Rendering

While a component could make changes to the DOM the element is within, there's a better way: using Shadow DOM.

Web Components: from zero to hero

This blogpost is intended to get a better grasp of the basics of web components.

Where to begin building Web Components? - The Basics

For anyone trying to begin building Web Components just even finding out where to start is pretty difficult.

Where to begin building Web Components? - Class-based Libraries

The class-based pattern is commonly used by Web Components libraries.