Web Components

  1. Custom Elements
    1. Defining Custom Elements
      1. The customElements.define() Method
        1. Method Syntax
          1. Registration Parameters
            1. Registration Timing
            2. Naming Conventions and Requirements
              1. Hyphenated Names Requirement
                1. Reserved Names to Avoid
                  1. Case Sensitivity Rules
                2. Element Classes
                  1. Extending HTMLElement
                    1. Class Declaration Syntax
                      1. Constructor Requirements
                        1. Inheritance Hierarchy
                        2. Class Structure Best Practices
                          1. Property Definitions
                            1. Method Organization
                          2. Types of Custom Elements
                            1. Autonomous Custom Elements
                              1. Standalone Element Creation
                                1. Usage Patterns
                                2. Customized Built-in Elements
                                  1. Extending Native Elements
                                    1. is Attribute Usage
                                      1. Browser Support Limitations
                                    2. Custom Element Lifecycle
                                      1. Lifecycle Overview
                                        1. connectedCallback()
                                          1. Element Attachment to DOM
                                            1. Initialization Logic
                                              1. Setup Operations
                                              2. disconnectedCallback()
                                                1. Element Removal from DOM
                                                  1. Cleanup Operations
                                                    1. Resource Disposal
                                                    2. adoptedCallback()
                                                      1. Document Transfer Handling
                                                        1. Cross-Document Movement
                                                        2. attributeChangedCallback()
                                                          1. Attribute Change Detection
                                                            1. Response Logic Implementation
                                                          2. Attribute Observation
                                                            1. observedAttributes Static Getter
                                                              1. Attribute List Definition
                                                                1. Performance Considerations
                                                                2. Attribute Reflection Patterns
                                                                  1. Property-Attribute Synchronization
                                                                    1. Type Conversion Strategies
                                                                  2. Element Upgrading
                                                                    1. Definition Timing Effects
                                                                      1. Upgrading Unresolved Elements
                                                                        1. Progressive Enhancement Patterns

                                                                      Previous

                                                                      1. Introduction to Web Components

                                                                      Go to top

                                                                      Next

                                                                      3. Shadow DOM