Fullstack Web Components. The Complete Guide to Building UI Libraries and Web Applications with Web Components

568 Pages·2020·21.042 MB·English

by  Steve Belovarich, Nate Murray (ed.)

Fullstack Web Components
The Complete Guide to Building UI Libraries and Web Applications with
Web Components
Written by Steve Belovarich
Edited by Nate Murray
© 2020 Fullstack.io
All rights reserved. No portion of the book manuscript may be
reproduced, stored in a retrieval system, or transmitted in any form or by
any means beyond the number of purchased copies, except for a single
backup or archival copy. The code may be used freely in your projects,
commercial or otherwise.
The authors and publisher have taken care in preparation of this book,
but make no expressed or implied warranty of any kind and assume no
responsibility for errors or omissions. No liability is assumed for
incidental or consequential damagers in connection with or arising out
of the use of the information or programs container herein.
Published by \newline
Contents
BookRevision . . . . . . . . . . . . . . . . . . . . . . . . . 1
JoinOurDiscord . . . . . . . . . . . . . . . . . . . . . . . 1
BugReports . . . . . . . . . . . . . . . . . . . . . . . . . . 1
BenotifiedofupdatesviaTwitter . . . . . . . . . . . . . 1
We’dlovetohearfromyou!. . . . . . . . . . . . . . . . . 1
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Abouttheauthor . . . . . . . . . . . . . . . . . . . . . . . 3
WebComponents. . . . . . . . . . . . . . . . . . . . . . . 4
Aboutthisbook . . . . . . . . . . . . . . . . . . . . . . . . 5
Whoisthisbookfor . . . . . . . . . . . . . . . . . . . . . 5
IntroductiontoWebComponents . . . . . . . . . . . . . 6
WhatareWebComponents? . . . . . . . . . . . . . . . . 11
ThemanyusesofWebComponents . . . . . . . . . . . . 17
ImplementingadesignsystemwithWebComponents . 19
ConventionsusedinthisBook . . . . . . . . . . . . . . . 20
Storybook . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Application . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Cypress . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Storyshots . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Monorepo . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Settingupthedevelopmentenvironment . . . . . . . . . 25
Prerequisites. . . . . . . . . . . . . . . . . . . . . . . . . . 25
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
CONTENTS
PartOne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
PartOne . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Specification . . . . . . . . . . . . . . . . . . . . . . . . . 32
Whatyouwilllearn . . . . . . . . . . . . . . . . . . . . . 33
DevelopinginPartOne . . . . . . . . . . . . . . . . . . . 34
GettingtoKnowWebComponents. . . . . . . . . . . . . . 35
ChapterOne. . . . . . . . . . . . . . . . . . . . . . . . . . 35
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Whatyouwillbuild . . . . . . . . . . . . . . . . . . . . . 35
Whatyouwilllearn . . . . . . . . . . . . . . . . . . . . . 38
Acceptancecriteria . . . . . . . . . . . . . . . . . . . . . . 38
Gettingstarted . . . . . . . . . . . . . . . . . . . . . . . . 39
ScaffoldingCardComponent . . . . . . . . . . . . . . . . 39
Structurecontentwithtemplateslots . . . . . . . . . . . 45
Createcontrolsforthestory . . . . . . . . . . . . . . . . 49
Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Testingthecard . . . . . . . . . . . . . . . . . . . . . . . . 60
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Form-associatedcustomelements . . . . . . . . . . . . . . 74
ChapterTwo . . . . . . . . . . . . . . . . . . . . . . . . . 74
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Whatyouwillbuild . . . . . . . . . . . . . . . . . . . . . 76
Whatyouwilllearn . . . . . . . . . . . . . . . . . . . . . 79
Acceptancecriteria . . . . . . . . . . . . . . . . . . . . . . 79
Gettingstarted . . . . . . . . . . . . . . . . . . . . . . . . 80
ScaffoldingTextInputComponent . . . . . . . . . . . . . 80
Structurethecontent . . . . . . . . . . . . . . . . . . . . . 82
Definethestory. . . . . . . . . . . . . . . . . . . . . . . . 84
FormAssociatedandElementInternals . . . . . . . . . . 86
HandlingValidation . . . . . . . . . . . . . . . . . . . . . 89
Listeningforattributechanges . . . . . . . . . . . . . . . 98
Userfeedback . . . . . . . . . . . . . . . . . . . . . . . . . 112
HandlingDisabledState . . . . . . . . . . . . . . . . . . . 115
CONTENTS
Makestories . . . . . . . . . . . . . . . . . . . . . . . . . . 116
StylingwithCSSvariables . . . . . . . . . . . . . . . . . 119
EmulatingHTMLInputElement . . . . . . . . . . . . . . . 123
Makingaform . . . . . . . . . . . . . . . . . . . . . . . . 129
HandlingFormData . . . . . . . . . . . . . . . . . . . . . 137
TestingTextInputComponent . . . . . . . . . . . . . . . . 139
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Customizedbuilt-inelements . . . . . . . . . . . . . . . . . 146
ChapterThree. . . . . . . . . . . . . . . . . . . . . . . . . 146
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Whatyouwillbuild . . . . . . . . . . . . . . . . . . . . . 149
Whatyouwilllearn . . . . . . . . . . . . . . . . . . . . . 150
Acceptancecriteria . . . . . . . . . . . . . . . . . . . . . . 151
Gettingstarted . . . . . . . . . . . . . . . . . . . . . . . . 151
ScaffoldingButtonComponent . . . . . . . . . . . . . . . 151
StylingButtonComponent . . . . . . . . . . . . . . . . . . 155
Makingtheformaccessible . . . . . . . . . . . . . . . . . 167
TestingButtonComponent . . . . . . . . . . . . . . . . . 179
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
PartTwo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
PartTwo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
UILibrary . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Whatyouwilllearn . . . . . . . . . . . . . . . . . . . . . 184
DevelopinginPartTwo . . . . . . . . . . . . . . . . . . . 184
Micro-library . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
ChapterFour . . . . . . . . . . . . . . . . . . . . . . . . . 186
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Whatisamicro-library? . . . . . . . . . . . . . . . . . . . 190
Codinginamonorepo . . . . . . . . . . . . . . . . . . . . 190
Whatyouwillbuild . . . . . . . . . . . . . . . . . . . . . 192
Whatyouwilllearn . . . . . . . . . . . . . . . . . . . . . 192
Acceptancecriteria . . . . . . . . . . . . . . . . . . . . . . 192
Gettingstarted . . . . . . . . . . . . . . . . . . . . . . . . 193
CONTENTS
ClassDecorator . . . . . . . . . . . . . . . . . . . . . . . . 193
MethodDecorator . . . . . . . . . . . . . . . . . . . . . . 227
DefinetheListendecorator . . . . . . . . . . . . . . . . . 231
RefactorTextInputComponent . . . . . . . . . . . . . . . 238
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
CompoundCustomElements . . . . . . . . . . . . . . . . . 243
ChapterFive. . . . . . . . . . . . . . . . . . . . . . . . . . 243
ComponentCommunication . . . . . . . . . . . . . . . . 243
Whatyouwillbuild . . . . . . . . . . . . . . . . . . . . . 247
Whatyouwilllearn . . . . . . . . . . . . . . . . . . . . . 247
Acceptancecriteria . . . . . . . . . . . . . . . . . . . . . . 247
Gettingstarted . . . . . . . . . . . . . . . . . . . . . . . . 248
MockingTableDatainStorybook . . . . . . . . . . . . . 248
CodingCompoundComponents . . . . . . . . . . . . . . 260
AttributeDrilling . . . . . . . . . . . . . . . . . . . . . . . 260
BroadcastChannel . . . . . . . . . . . . . . . . . . . . . . 264
RenderingColumnsandRows . . . . . . . . . . . . . . . 266
StylingTableComponent . . . . . . . . . . . . . . . . . . 272
HandlingCRUDEventswithBroadcastChannel . . . . . 275
MakingtheTableEditable . . . . . . . . . . . . . . . . . . 280
TestingtheTable . . . . . . . . . . . . . . . . . . . . . . . 313
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . 321
PoweringDialogswithHTMLTemplates . . . . . . . . . . 324
ChapterSix . . . . . . . . . . . . . . . . . . . . . . . . . . 324
HTMLTemplates . . . . . . . . . . . . . . . . . . . . . . . 324
Whatyouwillbuild . . . . . . . . . . . . . . . . . . . . . 328
Whatyouwilllearn . . . . . . . . . . . . . . . . . . . . . 328
Acceptancecriteria . . . . . . . . . . . . . . . . . . . . . . 328
Gettingstarted . . . . . . . . . . . . . . . . . . . . . . . . 329
MockingtheDialoginStorybook . . . . . . . . . . . . . 329
DialogComponent . . . . . . . . . . . . . . . . . . . . . . 337
ModalandTooltip . . . . . . . . . . . . . . . . . . . . . . 343
QueryingDOMAcrossShadowBoundaries . . . . . . . 350
CONTENTS
DialogStack . . . . . . . . . . . . . . . . . . . . . . . . . . 362
TestingDialogs . . . . . . . . . . . . . . . . . . . . . . . . 372
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . 378
DistributingCustomElementLibraries . . . . . . . . . . . 380
ChapterSeven. . . . . . . . . . . . . . . . . . . . . . . . . 380
UILibraries . . . . . . . . . . . . . . . . . . . . . . . . . . 380
Whatyouwillbuild . . . . . . . . . . . . . . . . . . . . . 384
Whatyouwilllearn . . . . . . . . . . . . . . . . . . . . . 384
Acceptancecriteria . . . . . . . . . . . . . . . . . . . . . . 385
Gettingstarted . . . . . . . . . . . . . . . . . . . . . . . . 385
DistributingCustomElementUILibraries . . . . . . . . 386
ProvidingDocumentationwithCustomElementsMani-
festandStorybook . . . . . . . . . . . . . . . . . . 398
SetupContinuousIntegrationwithGithubActions . . . 412
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . 423
PartThree . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
PartThree . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
Application . . . . . . . . . . . . . . . . . . . . . . . . . . 425
Whatyouwilllearn . . . . . . . . . . . . . . . . . . . . . 425
DevelopinginPartThree . . . . . . . . . . . . . . . . . . 426
ApplicationDevelopmentwithCustomElements . . . . . 428
ChapterEight . . . . . . . . . . . . . . . . . . . . . . . . . 428
ApplicationDevelopmentwithCustomElements . . . . 428
Whatyouwillbuild . . . . . . . . . . . . . . . . . . . . . 430
Whatyouwilllearn . . . . . . . . . . . . . . . . . . . . . 431
Acceptancecriteria . . . . . . . . . . . . . . . . . . . . . . 431
Gettingstarted . . . . . . . . . . . . . . . . . . . . . . . . 432
LandingPage . . . . . . . . . . . . . . . . . . . . . . . . . 432
AppHeader . . . . . . . . . . . . . . . . . . . . . . . . . . 436
CookieFooter . . . . . . . . . . . . . . . . . . . . . . . . . 447
LandingPageContent . . . . . . . . . . . . . . . . . . . . 460
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . 467
CONTENTS
RoutingCustomElementsinaSPA . . . . . . . . . . . . . . 469
ChapterNine . . . . . . . . . . . . . . . . . . . . . . . . . 469
RoutingCustomElementsinaSPA . . . . . . . . . . . . 469
Whatyouwillbuild . . . . . . . . . . . . . . . . . . . . . 472
Whatyouwilllearn . . . . . . . . . . . . . . . . . . . . . 472
Acceptancecriteria . . . . . . . . . . . . . . . . . . . . . . 472
Gettingstarted . . . . . . . . . . . . . . . . . . . . . . . . 472
Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473
LoginView . . . . . . . . . . . . . . . . . . . . . . . . . . 483
DashboardView . . . . . . . . . . . . . . . . . . . . . . . 498
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . 506
Server-sideRenderingwithDeclarativeShadowDOM . . 508
ChapterTen . . . . . . . . . . . . . . . . . . . . . . . . . . 508
Server-SideRenderingCustomElements . . . . . . . . . 508
Whatyouwillbuild . . . . . . . . . . . . . . . . . . . . . 516
Whatyouwilllearn . . . . . . . . . . . . . . . . . . . . . 517
Acceptancecriteria . . . . . . . . . . . . . . . . . . . . . . 517
Gettingstarted . . . . . . . . . . . . . . . . . . . . . . . . 517
DeclarativeShadowDOMTemplates . . . . . . . . . . . 517
Shim . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 532
Ponyfill . . . . . . . . . . . . . . . . . . . . . . . . . . . . 536
ExpressMiddleware . . . . . . . . . . . . . . . . . . . . . 537
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . 551
FullstackWebComponents . . . . . . . . . . . . . . . . . . 553
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . 553
Specification . . . . . . . . . . . . . . . . . . . . . . . . . 554
Benefits . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556
Thefutureisbright . . . . . . . . . . . . . . . . . . . . . . 558
Changelog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560
Revision1(04-04-2022). . . . . . . . . . . . . . . . . . . . 560
Revision2(12-06-2022). . . . . . . . . . . . . . . . . . . . 560
CONTENTS 1
Book Revision
Revision1-Initialpre-releaseofthebook-04-04-2022
Revision2-Changebookcover-12-06-2022
Join Our Discord
Come chat with other readers of the book in the official newline
Discordchannel:
Joinhere:https://newline.co/discord/webcomponents¹
Bug Reports
Ifyou’dliketoreportanybugs,typos,orsuggestionsjustemailus
at:[email protected].
Be notified of updates via Twitter
Ifyou’dliketobenotifiedofupdatestothebookonTwitter,follow
usat@fullstackio².
We’d love to hear from you!
Did you like the book? Did you find it helpful? We’d love to add
your face to our list of testimonials on the website! Email us at:
[email protected]³.
¹https://newline.co/discord/webcomponents
²https://twitter.com/fullstackio
³mailto:[email protected]
Introduction
Acknowledgements
FormywifeSusanne.
Foreword
This is a book about Web Components. UI components are a
commonpatterninmanyfrontendwebdevelopmentframeworks
likeAngular,ReactorVue,butcodinguserinterfacesinthecontext
of a framework usually makes sharing those components difficult.
Angularcomponentscan’tbeeasilyloadedinthecontextofReact,
forinstance.Theframeworkisaclosedsystem.
If you can move past the framework, and possibly enjoy the
simplification and standardization offered by web specifications,
coding with Web Components can be quite rewarding. Working
directly with specifications opens up a world once obscured by
the framework. The web platform is yours to explore and find
interestingwaystoutilizepartsofHTML,CSS,andJavaScript.By
using web specifications to code UI components you can achieve
extraordinaryresults.Whenusedresponsibly,adoptingWebCom-
ponents as your UI component pattern can lead to stellar perfor-
mance,compliancewithaccessibilitystandards,andreusability.
Atenterprisecorporationsitcanberathercostlytosupportseveral
development teams. One way to reduce operational overhead is
to standardize UI components and reuse them across a software
product. This cuts down on teams “reinventing the wheel”. I’ve
witnessed teams struggle with user interface development at sev-
eral companies. It can be quite difficult to coordinate the use