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 13. Importing Code

Jason Strimpel

Practically every other application platform allows packaging and importing code, but the web platform does not. This makes it extremely difficult to share code in a common fashion across applications. In the absence of a standard import, many other creative solutions have been invented and adopted by developers. However, none of these solutions have holistically addressed the need to include CSS, JavaScript, HTML, images, etc. as a single resource. This is what imports promise to deliver.

Note

There are imports already, in the sense that there are <link> tags for CSS and <script> tags for JavaScript that work for including code. However, these do not scale well or allow developers to define complete resources in a standard way that works consistently.

Declaring an Import

Importing code is as simple as adding a <link> and setting the rel value to import:

<head>
    <link id="meeseeks-import" rel="import" href="/imports/meeseeks/index.html">
</head>

Imports can also be added to a document programmatically:

<head>
    <script type="text/javascript">
        var link = document.createElement('link');
        link.rel = 'import';
        link.id = 'meeseeks-import';
        link.href = '/imports/meeseeks/index.html';
        link.onload = function (e) {
            // do something with import
        };
        link.onerror = function (e) {
            // doh! something went wrong loading import
            // handle error accordingly
        };

        document.head.appendChild(link);
    </script>
</head>