Developing Web Components

Developing Web Components

by Jarrod Overson, Jason Strimpel
Released February 2015
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781491905692

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Although web components are still on the bleeding edge—barely supported in modern browsers—the technology is also moving extremely fast. This practical guide gets you up to speed on the concepts underlying W3C’s emerging standard and shows you how to build custom, reusable HTML5 Web Components.

Regardless of your experience with libraries such as jQuery and Polymer, this book teaches JavaScript developers the DOM manipulations these libraries perform. You’ll learn how to build a basic widget with vanilla JavaScript and then convert it into a web component that’s semantic, declarative, encapsulated, consumable, and maintainable. With custom components, the Web can finally fulfill its potential as a natively extensible application platform. This book gets you in at the right time.

  • Understand core concepts (such as normal flow and positioning, and Z-index) for properly positioning, dragging, and resizing elements
  • Explore UI concepts and patterns typically abstracted away by Dojo, jQuery UI, Kendo UI, and other libraries
  • Dive into the W3C standard and convert your working widget example into a fully functioning web component
  • Learn how to encapsulate, package, and deploy your web components with Google’s Polymer framework

Table of contents

  1. Preface
    1. Why We Wrote This Book
    2. What This Book Is
      1. Part I, UI Core Concepts
      2. Part II, Building Our UI
      3. Part III, Building HTML5 Web Components
      4. Part IV, Testing, Building, and Deploying Components with Polymer
    3. What This Book Isn’t
    4. Conventions Used in This Book
    5. Using Code Examples
    6. Safari® Books Online
    7. How to Contact Us
    8. Acknowledgments
      1. Jason Strimpel
      2. Jarrod Overson
  2. 1. Introduction
    1. What Are Web Components?
      1. HTML Templates
      2. HTML Imports
      3. Custom Elements
      4. The Shadow DOM
    2. Why Web Components?
  3. I. UI Core Concepts
  4. 2. Creating a Solid Foundation
    1. The Importance of a DOM Abstraction Layer
    2. API Design and Widget Life Cycle
    3. The Inheritance Pattern
    4. Dependencies
    5. Optimization
    6. A Web Component Is Not JavaScript Alone
    7. Example Widget
      1. The Voltron Widget Base Class
      2. Dialog Class
      3. Dialog CSS and HTML
    8. Summary
  5. 3. Normal Flow and Positioning
    1. Normal Flow
    2. Positioning Elements
      1. offsetParent
      2. Positioning
    3. Calculating an Element’s Position
      1. Relative to the Viewport
      2. Relative to the Document
    4. Positioning the Dialog Widget
    5. Summary
  6. 4. Understanding and Managing z-index
    1. What Exactly Is the z-index Property?
    2. Rendering Layers, Stacking Order, and z-index
      1. Default Stacking Orders
      2. Overriding the Default Stacking Order
    3. Stacking Contexts
      1. How Is a Stacking Context Created?
      2. Increasing Complexity
    4. Managing z-indexes
      1. z-index Manager
    5. Converting to a jQuery Plugin
    6. Adding z-index Management to the Dialog Widget
    7. Summary
  7. II. Building Our UI
  8. 5. Cloning Nodes
    1. Using the cloneNode Method
    2. Using jQuery.clone
    3. Continuation of the Dialog Widget
    4. Summary
  9. 6. Constructing an Overlay
    1. Defining an API
    2. Utilities
      1. Detecting Scrollbar Width
      2. Accounting for the Scrollbar When Calculating a Containing Element’s Width
      3. Getting an Element’s Dimensions and Coordinates
      4. Listening for Resize and Scrolling Events
    3. Updating Options
    4. Destroying
    5. Positioning
      1. Positioning an Element Relative to the Viewport or Another Element
      2. Positioning an Element Relative to Another Element
    6. Adding the Overlay to the Dialog Widget
    7. Summary
  10. 7. Making Elements Draggable
    1. Mouse Events
      1. $.mousemove
      2. $.mousedown
      3. $.mouseup
    2. Mouse Events Best Practices
      1. 1. Bind $.mousemove on $.mousedown
      2. 2. Unbind $.mousemove on $.mouseup
      3. 3. Bind $.mouseup to the <body>
      4. 4. Namespace All Event Bindings
    3. Defining an API
    4. Creating a Drag Handle
    5. Making Things Move
      1. $.mousedown Handler
      2. $.mousemove Handler
      3. $.mouseup Handler
    6. Destroying a Draggable Instance
    7. Making the Dialog Widget Draggable
    8. Summary
  11. 8. Resizing Elements
    1. Mouse Events and Best Practices (Recap)
      1. Events
      2. Best Practices
    2. Resizing an Element
    3. Making a Resizable API
    4. Defining Drag Handles
    5. Binding Event Handlers
      1. $.mousedown Handler
      2. $.mousemove Handler
      3. $.mouseup Handler
    6. Destroying a Resizable Instance
    7. Completed Resizing Library
    8. Making the Dialog Widget Resizable
    9. Summary
  12. 9. Completing the Dialog Widget
    1. Styling the Widget
      1. Adding CSS
    2. Concatenating the JavaScript
    3. Summary
  13. III. Building HTML5 Web Components
  14. 10. Utilizing Templates
    1. Understanding the Importance of Templates
      1. Deferring the Processing of Resources
      2. Deferring the Rendering of Content
      3. Hiding the Content from the DOM
    2. Creating and Using a Template
      1. Detecting Browser Support
      2. Placing a Template in Markup
      3. Adding a Template to the DOM
    3. Converting the Dialog Component to a Template
      1. Creating a Wrapper API for the Dialog Template
      2. Instantiating a Dialog Component Instance
    4. Abstracting the Dialog Template Wrapper
    5. Summary
  15. 11. Working with the Shadow DOM
    1. What Is the Shadow DOM?
    2. Shadow DOM Basics
      1. Shadow Host
      2. Shadow Root
    3. Using a Template with the Shadow DOM
    4. Shadow DOM Styling
      1. Style Encapsulation
      2. Styling the Host Element
      3. Styling Shadow Root Elements from the Parent Page
    5. Content Projection
      1. Projection via a Content Tag
      2. Projection via Content Selectors
      3. Getting Distributed Nodes and Insertion Points
    6. Shadow Insertion Points
    7. Events and the Shadow DOM
    8. Updating the Dialog Template to Use the Shadow DOM
      1. Dialog Markup
      2. Dialog API
      3. Updating the Dialog show Method
      4. Instantiating a Dialog Component Instance
    9. Summary
  16. 12. Creating Custom Elements
    1. Introducing Custom Elements
    2. Registering Custom Elements
    3. Extending Elements
      1. Extending Custom Elements
      2. Extending Native Elements
    4. Defining Properties and Methods
    5. Resolving Custom Elements
    6. Hooking Into Custom Element Life Cycles
      1. createdCallback
      2. attachedCallback
      3. detachedCallback
      4. attributeChangedCallback
    7. Styling Custom Elements
    8. Utilizing Templates and the Shadow DOM with Custom Elements
    9. Converting the Dialog Component to a Custom Element
      1. Creating the Dialog Custom Element
      2. Implementing the Dialog Custom Element’s Callbacks
      3. Implementing the Dialog Custom Element API
      4. Showing the Dialog
    10. Summary
  17. 13. Importing Code
    1. Declaring an Import
    2. Accessing an Import’s Content
      1. Referencing Documents
      2. Applying Styles
      3. Accessing Templates
      4. Executing JavaScript
    3. Understanding Imports in Relation to the Main Document
      1. Parsing Imports
      2. Cross-Domain Considerations
      3. Subimports
    4. Loading Custom Elements
    5. Importing the Dialog
    6. Summary
  18. IV. Testing, Building, and Deploying Components with Polymer
  19. 14. Introducing Polymer
    1. Polymer Elements
      1. Adding Style
      2. External Resources
      3. Filtering Expressions
    2. Template Syntax
      1. Data Binding
      2. Block Repetition
      3. Bound Scopes
      4. Conditional Blocks
      5. Multiple Template Directives at Once
    3. Attributes and Properties—Your Element’s API
      1. Naked Attributes
      2. Published Properties
      3. Instance Methods
    4. Polymer’s JavaScript APIs
      1. Life Cycle Methods
      2. Events
      3. Managing Delayed Work
    5. Summary
  20. 15. Porting Our Dialog to Polymer
    1. Why Port Anything to Polymer at All?
    2. The Direct Port
      1. Managing Dependencies
      2. Installing Dependencies with Bower
      3. Getting Started
    3. That Was Easy—A Little Too Easy!
    4. jQuery in a Polymer World
      1. What Does jQuery Provide?
      2. Removing jQuery
      3. The Verdict on jQuery
    5. Summary
  21. 16. Testing Web Components
    1. PhantomJS 1
    2. PhantomJS 2
    3. Selenium WebDriver
    4. Karma
    5. Test Specs
    6. Running Our Tests
    7. Summary
  22. 17. Packaging and Publishing
    1. Vulcanize
    2. Gulp
    3. Grunt
      1. Gruntfiles
      2. Grunt Tasks
      3. Registering Tasks
      4. Grunt Configuration
    4. Publishing with Bower
      1. Registering the Component
    5. Summary
  23. 18. Final Words
    1. Where Do We Go from Here?
      1. Polymer
      2. Mozilla X-Tag
      3. document-register-element
      4. WebComponents.org
      5. CustomElements.io
    2. Good Luck!
  24. Index

Product information

  • Title: Developing Web Components
  • Author(s): Jarrod Overson, Jason Strimpel
  • Release date: February 2015
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781491905692