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

Part II. Building Our UI

Part II introduces concepts and patterns that are typically abstracted away from day-to-day frontend development by libraries such as Dojo, jQuery UI, Kendo UI, and Twitter Bootstrap. These concepts and patterns are used to implement UI widgets that you probably work with on a daily basis as a frontend engineer. After reading this part of the book, you will have a solid understanding of how elements are positioned and how to manipulate element positions using JavaScript.

Note

If you skipped Chapter 2, you might find yourself asking, “Why are we building a widget? I thought this was a web components book!” That’s a valid question. The answer is that this book is more than just a rehashing of the Web Components specification. It is designed to provide a better understanding of the DOM by exploring the details underlying today’s widget interfaces. Knowledge of these details is required to build moderately complex web components, ...