无标题

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

Chapter 1. Introduction

Part I. UI Core Concepts
Chapter 2. Creating a Solid Foundation
Chapter 3. Normal Flow and Positioning
Chapter 4. Understanding and Managing z-index

Part II. Building Our UI
Chapter 5. Cloning Nodes
Chapter 6. Constructing an Overlay
Chapter 7. Making Elements Draggable
Chapter 8. Resizing Elements
Chapter 9. Completing the Dialog Widget

Part III. Building HTML5 Web Components
Chapter 10. Utilizing Templates
Chapter 11. Working with the Shadow DOM
Chapter 12. Creating Custom Elements
Chapter 13. Importing Code

Part IV. Testing, Building, and Deploying Components with Polymer
Chapter 14. Introducing Polymer
Chapter 15. Porting Our Dialog to Polymer
Chapter 16. Testing Web Components
Chapter 17. Packaging and Publishing
Chapter 18. Final Words