Web Components in Action
Chris Buckett
  • MEAP began October 2013
  • Publication in November 2015 (estimated)
  • ISBN 9781617291944
  • 225 pages (estimated)
  • printed in black & white
We regret that Manning Publications will not be publishing this title.

Web Components in Action is a thorough introduction to the new W3C Web Components specification. In it, you'll learn how to build complex web apps with Web Components and the Polymer framework using Shadow DOM, Model Driven Views, and custom elements. You'll build tags that capture reusable parts of an application, such as <login-screen> or <blog-comments>. You'll even learn how to wrap and reuse a whole application. Along the way, you'll discover how using existing and custom Web Components will make your web applications easier to build, read, and maintain.

Table of Contents detailed table of contents

1. The world of web components

1.1. What is a web component?

1.1.1. HTML elements primer

1.1.2. Using other people’s web components

1.1.3. Using your own web components

1.2. Browser support for web components

1.2.1. Looking at the Polymer layers

1.2.2. Importing the polymer and platform library layers

1.3. Core technologies

1.3.1. Templates

1.3.2. Model Driven Views

1.3.3. Custom Elements

1.3.4. HTML Imports

1.3.5. Shadow DOM

1.4. Supercharged Polymer elements

1.5. Summary

2. Tempting templates

2.1. Introduction to HTML Templates

2.1.1. Preventing side effects

2.1.2. Preventing Cross site scripting

2.2. Creating and using templates

2.2.1. Hiding nodes in the template

2.2.2. Accessing template child nodes

2.3. Template Data Binding

2.3.1. Binding data to templates

2.3.2. Repeating data items

2.3.3. Template References

2.3.4. Conditional Binding

2.3.5. Two-way data binding

2.4. Summary

3. Templating with Polymer Elements

3.1. Introducing Polymer Elements

3.1.1. Anatomy of a simple Polymer element

3.1.2. Creating an instance of your Polymer element

3.1.3. Be aware of the Shadow DOM

3.2. Polymer element data binding

3.2.1. Data binding to model fields

3.2.2. Publishing Attributes

3.3. Nesting Polymer elements

3.3.1. Simple Data binding between Polymer elements

3.3.2. Binding complex objects between elements

3.4. Inheritance

3.4.1. Inheriting the user interface

3.4.2. Inheriting attributes

3.5. Summary

4. A web component workflow

4.1. Introduction to the tools

4.1.1. Yo

4.1.2. Bower

4.1.3. Grunt

4.1.4. Unit Testing with Mocha

4.1.5. Vulcanize

4.2. Scaffolding your Web Component project

4.2.1. Generating Polymer elements

4.2.2. Exploring your applications files

4.2.3. Generated index.html

4.2.4. Generated Polymer elements

4.2.5. Other files and folders that make up your app

4.3. Incrementally building your application

4.3.1. Grunt

4.3.2. Bower

4.4. Unit Testing

4.4.1. Configuring grunt for polymer tests

4.4.2. Creating the test runner harness

4.4.3. Testing Polymer elements

4.5. Deployment

4.5.1. Creating a vulcanizer task

4.6. Summary

5. Dealing with user content and data

6. Interacting with web components

7. Styling web components

8. Hiding in the Shadow DOM

Appendixes

Appendix A: A tour of web components

About the Technology

Complex tags, like the HTML5 date picker, are actually sophisticated HTML structures provided behind the scenes by browser vendors. The new Web Components specification enables developers to create their own hidden implementations of HTML elements. For example, instead of pasting (and re-pasting) a "Facebook Like Button" script into a web page, you'd simply create a custom-built web component-driven tag. Although this new standard isn't integrated into all browsers, the "Platform" polyfill library delivered through Google's Polymer and Mozilla's Brick projects lets you use Web Components even where native support doesn't yet exist. Better still, both Polymer and Brick offer libraries of ready-to-use components.

What's inside

  • Complete introduction to the Web Components standard
  • Using Web Components via Google Polymer and Mozilla Brick
  • Leveraging the Polymer and Brick libraries
  • Using ShadowDOM to create more flexible components

About the reader

This book assumes intermediate HTML and CSS skills. No experience with Web Components or Polymer is required.

About the author

Chris Buckett is a seasoned front-end developer with Web, Java and .NET experience. Chris is also a Google Developer Expert and the author of Dart in Action from Manning Publications.


Manning Early Access Program (MEAP) Read chapters as they are written, get the finished eBook as soon as it’s ready, and receive the pBook long before it's in bookstores.