book

Developing Web Components

by Jarrod Overson, Jason Strimpel

February 2015

Intermediate to advanced

252 pages

5h 17m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Why We Wrote This BookWhat This Book IsPart I, UI Core ConceptsPart II, Building Our UIPart III, Building HTML5 Web ComponentsPart IV, Testing, Building, and Deploying Components with PolymerWhat This Book Isn’tConventions Used in This BookUsing Code ExamplesSafari® Books OnlineHow to Contact UsAcknowledgmentsJason StrimpelJarrod Overson
What Are Web Components?HTML TemplatesHTML ImportsCustom ElementsThe Shadow DOMWhy Web Components?
The Importance of a DOM Abstraction LayerAPI Design and Widget Life CycleThe Inheritance PatternDependenciesOptimizationA Web Component Is Not JavaScript AloneExample WidgetThe Voltron Widget Base ClassDialog ClassDialog CSS and HTMLSummary
Normal FlowPositioning ElementsoffsetParentPositioningCalculating an Element’s PositionRelative to the ViewportRelative to the DocumentPositioning the Dialog WidgetSummary
What Exactly Is the z-index Property?Rendering Layers, Stacking Order, and z-indexDefault Stacking OrdersOverriding the Default Stacking OrderStacking ContextsHow Is a Stacking Context Created?Increasing ComplexityManaging z-indexesz-index ManagerConverting to a jQuery PluginAdding z-index Management to the Dialog WidgetSummary
Using the cloneNode MethodUsing jQuery.cloneContinuation of the Dialog WidgetSummary
Defining an APIUtilitiesDetecting Scrollbar WidthAccounting for the Scrollbar When Calculating a Containing Element’s WidthGetting an Element’s Dimensions and CoordinatesListening for Resize and Scrolling EventsUpdating OptionsDestroyingPositioningPositioning an Element Relative to the Viewport or Another ElementPositioning an Element Relative to Another ElementAdding the Overlay to the Dialog WidgetSummary
Mouse Events$.mousemove$.mousedown$.mouseupMouse Events Best Practices1. Bind $.mousemove on $.mousedown2. Unbind $.mousemove on $.mouseup3. Bind $.mouseup to the <body>4. Namespace All Event BindingsDefining an APICreating a Drag HandleMaking Things Move$.mousedown Handler$.mousemove Handler$.mouseup HandlerDestroying a Draggable InstanceMaking the Dialog Widget DraggableSummary

Mouse Events and Best Practices (Recap)EventsBest PracticesResizing an ElementMaking a Resizable APIDefining Drag HandlesBinding Event Handlers$.mousedown Handler$.mousemove Handler$.mouseup HandlerDestroying a Resizable InstanceCompleted Resizing LibraryMaking the Dialog Widget ResizableSummary
Styling the WidgetAdding CSSConcatenating the JavaScriptSummary
Understanding the Importance of TemplatesDeferring the Processing of ResourcesDeferring the Rendering of ContentHiding the Content from the DOMCreating and Using a TemplateDetecting Browser SupportPlacing a Template in MarkupAdding a Template to the DOMConverting the Dialog Component to a TemplateCreating a Wrapper API for the Dialog TemplateInstantiating a Dialog Component InstanceAbstracting the Dialog Template WrapperSummary
What Is the Shadow DOM?Shadow DOM BasicsShadow HostShadow RootUsing a Template with the Shadow DOMShadow DOM StylingStyle EncapsulationStyling the Host ElementStyling Shadow Root Elements from the Parent PageContent ProjectionProjection via a Content TagProjection via Content SelectorsGetting Distributed Nodes and Insertion PointsShadow Insertion PointsEvents and the Shadow DOMUpdating the Dialog Template to Use the Shadow DOMDialog MarkupDialog APIUpdating the Dialog show MethodInstantiating a Dialog Component InstanceSummary
Introducing Custom ElementsRegistering Custom ElementsExtending ElementsExtending Custom ElementsExtending Native ElementsDefining Properties and MethodsResolving Custom ElementsHooking Into Custom Element Life CyclescreatedCallbackattachedCallbackdetachedCallbackattributeChangedCallbackStyling Custom ElementsUtilizing Templates and the Shadow DOM with Custom ElementsConverting the Dialog Component to a Custom ElementCreating the Dialog Custom ElementImplementing the Dialog Custom Element’s CallbacksImplementing the Dialog Custom Element APIShowing the DialogSummary
Declaring an ImportAccessing an Import’s ContentReferencing DocumentsApplying StylesAccessing TemplatesExecuting JavaScriptUnderstanding Imports in Relation to the Main DocumentParsing ImportsCross-Domain ConsiderationsSubimportsLoading Custom ElementsImporting the DialogSummary
Polymer ElementsAdding StyleExternal ResourcesFiltering ExpressionsTemplate SyntaxData BindingBlock RepetitionBound ScopesConditional BlocksMultiple Template Directives at OnceAttributes and Properties—Your Element’s APINaked AttributesPublished PropertiesInstance MethodsPolymer’s JavaScript APIsLife Cycle MethodsEventsManaging Delayed WorkSummary
Why Port Anything to Polymer at All?The Direct PortManaging DependenciesInstalling Dependencies with BowerGetting StartedThat Was Easy—A Little Too Easy!jQuery in a Polymer WorldWhat Does jQuery Provide?Removing jQueryThe Verdict on jQuerySummary
PhantomJS 1PhantomJS 2Selenium WebDriverKarmaTest SpecsRunning Our TestsSummary
VulcanizeGulpGruntGruntfilesGrunt TasksRegistering TasksGrunt ConfigurationPublishing with BowerRegistering the ComponentSummary
Where Do We Go from Here?PolymerMozilla X-Tagdocument-register-elementWebComponents.orgCustomElements.ioGood Luck!

Content preview from Developing Web Components

Chapter 18. Final Words

Jarrod Overson

Congratulations—you know just enough about web components to start having a good time developing web applications. Once you start scratching the surface you’ll discover a vast world that will delight and surprise you. Web components aren’t the solution to every problem, though, and they present more questions than they answer—new questions that require new paradigms and patterns.

The field is also moving extremely quickly. To put it in perspective, when we started working on this book we planned to include a chapter on decorators, but that was eventually scrapped as the spec fizzled into nonexistence; the specs around creating custom components changed; Polymer went from alpha to beta to nearing a 1.0 release; and Chrome 36 stable shipped with full web component support out of the box. In a very short time web components went from a barely usable pipe dream to something that is legitimate and out in the wild.

This book is early for the realm of web components. We’re on top of it all and intend this book to be a transitional primer for people moving from the existing world of widget writing to the new world of web component authoring. Hopefully you’ll see multiple revisions of this book, each focusing on current best practices as the landscape evolves.

Where Do We Go from Here?

It is important to stay up to speed with the state of web components on the Web. This book is not able to be the final answer (yet…), so you’ll need to seek out information ...