Lessons
view all ⭢
lesson
Setting Up The Development EnvironmentFullstack Web ComponentsA guide for installing various technologies needed prior to coding the exercises in this book.
lesson
Conventions Used In The BookFullstack Web ComponentsWe'll introduce you to the mockups in Figma, the development environment used throughout the book, and other conventions used in this book.
lesson
Introduction to Web ComponentsFullstack Web ComponentsA brief introduction to the set of specifications called Web Components. We'll introduce you to concepts such as Shadow DOM, HTML templates, Custom Elements v1 and uncover typical use cases for developing Web Components.
lesson
UI LibraryFullstack Web ComponentsYou'll learn best practices for developing a UI Library with Web Components by coding a micro-library, developing two custom elements with the micro-library, and figuring out how to package the UI library for distribution.
lesson
Chapter Three SummaryFullstack Web ComponentsHow customized built-in elements can make custom elements more accessible.
lesson
Making the form accessibleFullstack Web ComponentsRevist the HTML form by making the user experience more accessible.
lesson
Styling ButtonComponentFullstack Web ComponentsCustomized built-ins can't benefit from the encapsulation provided by Shadow DOM, so you'll have to find another way to style ButtonComponent.
lesson
Scaffolding ButtonComponentFullstack Web ComponentsScaffold the customized built-in element ButtonComponent with Storybook.
lesson
Customized built-in elementsFullstack Web ComponentsYou'll code ButtonComponent, a customized built-in element that inherits accessibility characteristics from HTMLButtonElement.
lesson
Chapter Two SummaryFullstack Web ComponentsReviewing the work completed on the form-associated custom element TextInputComponent.
lesson
Making a formFullstack Web ComponentsYou'll update the Story and provide the missing APIs to TextInputComponent that allow the component to fully interact with a HTML form.
lesson
Emulating HTMLInputElementFullstack Web ComponentsWe've created a problem by encapsulating the HTMLInputElement by Shadow DOM. The HTMLInputElement API cann't be accessed by the outside world. In this section, you'll fix that by implementing getters and setters that emulate the HTMLInputElement on TextInputComponent.