Web Components

2.

Custom Elements

2.1.

Defining Custom Elements

2.1.1.

The customElements.define() Method

2.1.1.1.

2.1.1.2.

Registration Parameters

2.1.1.3.

Registration Timing

2.1.2.

Naming Conventions and Requirements

2.1.2.1.

Hyphenated Names Requirement

2.1.2.2.

Reserved Names to Avoid

2.1.2.3.

Case Sensitivity Rules

2.2.

Element Classes

2.2.1.

Extending HTMLElement

2.2.1.1.

Class Declaration Syntax

2.2.1.2.

Constructor Requirements

2.2.1.3.

Inheritance Hierarchy

2.2.2.

Class Structure Best Practices

2.2.2.1.

Property Definitions

2.2.2.2.

Method Organization

2.3.

Types of Custom Elements

2.3.1.

Autonomous Custom Elements

2.3.1.1.

Standalone Element Creation

2.3.1.2.

2.3.2.

Customized Built-in Elements

2.3.2.1.

Extending Native Elements

2.3.2.2.

is Attribute Usage

2.3.2.3.

Browser Support Limitations

2.4.

Custom Element Lifecycle

2.4.1.

Lifecycle Overview

2.4.2.

connectedCallback()

2.4.2.1.

Element Attachment to DOM

2.4.2.2.

Initialization Logic

2.4.2.3.

Setup Operations

2.4.3.

disconnectedCallback()

2.4.3.1.

Element Removal from DOM

2.4.3.2.

Cleanup Operations

2.4.3.3.

Resource Disposal

2.4.4.

adoptedCallback()

2.4.4.1.

Document Transfer Handling

2.4.4.2.

Cross-Document Movement

2.4.5.

attributeChangedCallback()

2.4.5.1.

Attribute Change Detection

2.4.5.2.

Response Logic Implementation

2.5.

Attribute Observation

2.5.1.

observedAttributes Static Getter

2.5.1.1.

Attribute List Definition

2.5.1.2.

Performance Considerations

2.5.2.

Attribute Reflection Patterns

2.5.2.1.

Property-Attribute Synchronization

2.5.2.2.

Type Conversion Strategies

2.6.

Element Upgrading

2.6.1.

Definition Timing Effects

2.6.2.

Upgrading Unresolved Elements

2.6.3.

Progressive Enhancement Patterns

Previous

1. Introduction to Web Components

Go to top

Next

3. Shadow DOM