Developing Web Components by Overson, Jarrod -- Read -- Imperial Library of Trantor

Index

Preface

Why We Wrote This Book What This Book Is

Part I, UI Core Concepts Part II, Building Our UI Part III, Building HTML5 Web Components Part IV, Testing, Building, and Deploying Components with Polymer

What This Book Isn’t Conventions Used in This Book Using Code Examples Safari® Books Online How to Contact Us Acknowledgments

Jason Strimpel Jarrod Overson

1. Introduction

What Are Web Components?

HTML Templates HTML Imports Custom Elements The Shadow DOM

Why Web Components?

I. UI Core Concepts 2. Creating a Solid Foundation

The Importance of a DOM Abstraction Layer API Design and Widget Life Cycle The Inheritance Pattern Dependencies Optimization A Web Component Is Not JavaScript Alone Example Widget

The Voltron Widget Base Class Dialog Class Dialog CSS and HTML

Summary

3. Normal Flow and Positioning

Normal Flow Positioning Elements

offsetParent

How the browser determines an element’s offsetParent

Positioning

Relative positioning Absolute positioning Fixed positioning

Calculating an Element’s Position

Relative to the Viewport Relative to the Document

Positioning the Dialog Widget Summary

4. Understanding and Managing z-index

What Exactly Is the z-index Property? Rendering Layers, Stacking Order, and z-index

Default Stacking Orders Overriding the Default Stacking Order

Stacking Contexts

How Is a Stacking Context Created? Increasing Complexity

Managing z-indexes

z-index Manager

API stub Utilities Determining if an element creates a stacking context Finding an element’s stacking context Modifying an element’s z-index Example usages Summary

Converting to a jQuery Plugin Adding z-index Management to the Dialog Widget Summary

II. Building Our UI 5. Cloning Nodes

Using the cloneNode Method Using jQuery.clone Continuation of the Dialog Widget Summary

6. Constructing an Overlay

Defining an API Utilities

Detecting Scrollbar Width Accounting for the Scrollbar When Calculating a Containing Element’s Width Getting an Element’s Dimensions and Coordinates Listening for Resize and Scrolling Events

Updating Options Destroying Positioning

Positioning an Element Relative to the Viewport or Another Element

CSS overlay JavaScript overlay

Positioning an Element Relative to Another Element

Adding the Overlay to the Dialog Widget Summary

7. Making Elements Draggable

Mouse Events

$.mousemove $.mousedown $.mouseup

Mouse Events Best Practices

1. Bind $.mousemove on $.mousedown 2. Unbind $.mousemove on $.mouseup 3. Bind $.mouseup to the <body> 4. Namespace All Event Bindings

Defining an API Creating a Drag Handle Making Things Move

$.mousedown Handler $.mousemove Handler $.mouseup Handler

Destroying a Draggable Instance Making the Dialog Widget Draggable Summary

8. Resizing Elements

Mouse Events and Best Practices (Recap)

Events Best Practices

Resizing an Element Making a Resizable API Defining Drag Handles Binding Event Handlers

$.mousedown Handler $.mousemove Handler $.mouseup Handler

Destroying a Resizable Instance Completed Resizing Library Making the Dialog Widget Resizable Summary

9. Completing the Dialog Widget

Styling the Widget

Adding CSS

Concatenating the JavaScript Summary

III. Building HTML5 Web Components 10. Utilizing Templates

Understanding the Importance of Templates

Deferring the Processing of Resources Deferring the Rendering of Content Hiding the Content from the DOM

Creating and Using a Template

Detecting Browser Support Placing a Template in Markup Adding a Template to the DOM

Converting the Dialog Component to a Template

Creating a Wrapper API for the Dialog Template Instantiating a Dialog Component Instance

Abstracting the Dialog Template Wrapper Summary

11. Working with the Shadow DOM

What Is the Shadow DOM? Shadow DOM Basics

Shadow Host Shadow Root

Creating a shadow root

Using a Template with the Shadow DOM Shadow DOM Styling

Style Encapsulation Styling the Host Element Styling Shadow Root Elements from the Parent Page

Content Projection

Projection via a Content Tag Projection via Content Selectors Getting Distributed Nodes and Insertion Points

Shadow Insertion Points Events and the Shadow DOM Updating the Dialog Template to Use the Shadow DOM

Dialog Markup Dialog API Updating the Dialog show Method Instantiating a Dialog Component Instance

Summary

12. Creating Custom Elements

Introducing Custom Elements Registering Custom Elements Extending Elements

Extending Custom Elements Extending Native Elements

Defining Properties and Methods Resolving Custom Elements Hooking Into Custom Element Life Cycles

createdCallback attachedCallback detachedCallback attributeChangedCallback

Styling Custom Elements Utilizing Templates and the Shadow DOM with Custom Elements Converting the Dialog Component to a Custom Element

Creating the Dialog Custom Element Implementing the Dialog Custom Element’s Callbacks Implementing the Dialog Custom Element API Showing the Dialog

Summary

13. Importing Code

Declaring an Import Accessing an Import’s Content

Referencing Documents Applying Styles Accessing Templates Executing JavaScript

Understanding Imports in Relation to the Main Document

Parsing Imports Cross-Domain Considerations Subimports

Loading Custom Elements Importing the Dialog Summary

IV. Testing, Building, and Deploying Components with Polymer 14. Introducing Polymer

Polymer Elements

Adding Style External Resources Filtering Expressions

Template Syntax

Data Binding Block Repetition Bound Scopes Conditional Blocks Multiple Template Directives at Once

Attributes and Properties—Your Element’s API

Naked Attributes Published Properties Instance Methods

Polymer’s JavaScript APIs

Life Cycle Methods Events Managing Delayed Work

Summary

15. Porting Our Dialog to Polymer

Why Port Anything to Polymer at All? The Direct Port

Managing Dependencies Installing Dependencies with Bower Getting Started

That Was Easy—A Little Too Easy! jQuery in a Polymer World

What Does jQuery Provide? Removing jQuery The Verdict on jQuery

Summary

16. Testing Web Components

PhantomJS 1 PhantomJS 2 Selenium WebDriver Karma Test Specs Running Our Tests Summary

17. Packaging and Publishing

Vulcanize Gulp Grunt

Gruntfiles Grunt Tasks Registering Tasks Grunt Configuration

Publishing with Bower

Registering the Component

Summary

18. Final Words

Where Do We Go from Here?

Polymer Mozilla X-Tag document-register-element WebComponents.org CustomElements.io

Good Luck!

Index

← Prev
Back
Next →

← Prev
Back
Next →