Exploring Web Components: Build Reusable UI Web Components with Standard Technologies

Length: 224 pages
Edition: 1
Language: English
Publisher: BPB Publications
Publication Date: 2020-08-24
ISBN-10: 938942397X
ISBN-13: 9789389423976
Sales Rank: #2882976 (See Top 100 Books)

Learn how to create reusable components to build modern Web user interfaces with standard technologies

Key Features

Learn how standard Web technologies allows you to build reusable UI components.
Learn how to protect the look and the internal behavior of your components.
Learn how to use Web Components in React, Angular, and Vue projects.
Learn how to use third-party libraries and tools to simplify the process of building your components.

Description
The design of Web user interfaces has been growing significantly in recent times thanks to libraries like React, Angular, Vue. They allow you to create awesome UI components, but have a great drawback: their components are not interoperable.

Web Components enable you to overcome this drawback by using a set of standard technologies.

The book drives you in the exploration of these technologies with a practical approach. It describes how to create Custom Elements; how to protect their internal behavior by leveraging the Shadow DOM; how to simplify the UI definition through HTML templates.
Also, you will discover how to distribute and use your Web Components and how to leverage libraries and tools to develop them.

Throughout the book, you will carry out a Web Component project that will provide you with practical experience in using those technologies.

What will you learn

Use Custom Elements technology to define your HTML elements.
Use Shadow DOM to protect the inner behavior of your UI components.
Work with HTML templates to simplify and enhance the way you define the UI of your components.
Reuse your Web Components in applications built with Vanilla JavaScript, React, Angular, and Vue.

Who this book is for
This book is for frontend Web developers who want to leverage standard technologies to build reusable UI components. Basic knowledge of JavaScript, HTML, and CSS is required.

Cover Page
Title Page
Copyright Page
Dedication Page
About the Author
About the Reviewer
Acknowledgement
Preface
Errata
Table of Contents
1. Getting Started with Web Components
    Structure
    Objectives
    UI, components, and applications
        1. Decomposing UI
        2. What is a component?
        3. Composing components
        4. Mapping components to HTML
    What are Web Components?
    Using a Web Component
    Browser support
    Using polyfills
    Conclusion
    Questions
2. Extending HTML Elements
    Structure
    Objectives
    Setting up a development environment
        The editor
        Development without building
        Development with building
            The Web Components builder project
    Custom elements
    Extending native elements
    Web Components naming rules
    Using a Custom Element based on native elements
        Including in an HTML page
        Importing in a JavaScript module
        Defining function-based Custom Elements
    Benefits of extending native elements
    Conclusion
    Questions
3. Creating Custom Web Components
    Structure
    Objectives
    Creating a Web Component from scratch
        Introducing the cookie alert project
        A minimal autonomous custom element
    Basic techniques to add CSS and markup
    The lifecycle of a Web Component
        The constructor
        The connectedCallback() reaction
        The attributeChangedCallback() reaction
        The adoptedCallback() reaction
        The disconnectedCallback() reaction
    Using a custom Web Component
    Conclusion
    Questions
4. Managing Properties and Attributes
    Structure
    Objectives
    Attributes and properties
        HTML attributes
        DOM properties
        Non-standard attributes management
        Attributes and properties synchronization
    Managing properties
        Adding properties
    Syncing attributes and properties
        Properties to attributes
        Attributes to properties
    Caveats and suggestions
    Conclusion
    Questions
5. Handling Events
    Structure
    Objectives
    Event management basics
    Listening to standard events
        Event propagation
    Creating custom events
        Managing policy acceptance
        Creating events
        Dispatching simple events
        The meaning of ‘this’
        Passing data
        Adding onevent attributes
    Removing event listeners
    Conclusion
    Questions
6. Using the Shadow DOM
    Structure
    Objectives
    Web Components and the DOM
    The global DOM
        The problem with the DOM
        DOM encapsulation attempts
    The shadow DOM
        What is the shadow DOM
        Using the shadow DOM
    Open and closed shadow DOM
    Conclusion
    Questions
7. Using HTML Templates
    Structure
    Objectives
    Introducing templates
        What is a template?
    Activating a template
        Why using a template?
    Template at work
    Composing markup with slots
        Enabling formatted text
        Named slots
        Using named slots
    Conclusion
    Questions
8. Distributing and Extending Web Components
    Structure
    Objectives
    Distribution strategies
        The script-based strategy
            Without building step
            With building step
            Implementing modules
        The package-based strategy
            Leveraging the GitHub repository
            Publishing in the public npm registry
    Extending Web Components
        Defining an extended Web Component
        Using an extended Web Component
    Conclusion
    Questions
9. Web Components and Other UI Frameworks
    Structure
    Objectives
    Web Components integration
    Web Components and React
    Web Components and Angular
    Web Components and Vue
    Building web components with UI Frameworks
    Building Web Components with React
    Building Web Components with Angular
    Building Web Components with Vue
    Conclusion
    Questions
10. Tools for Web Components Development
    Structure
    Objectives
    Simplifying Web Components building
    Polymer and LitElement
        The lit-html library
        Using LitElement
            Basic infrastructure
        Templates and UI
            Properties and attributes
        Events
        Lifecycle
    Hybrids
        Templates and UI
        Properties and attributes
        Events
        Lifecycle
    Slim
        Basic infrastructure
        Templates and UI
        Properties and attributes
        Events
        Lifecycle
    Stencil
        Basic infrastructure
        Templates and UI
        Properties and attributes
        Events
        Lifecycle
    Conclusion
    Questions