Lessons
view all ⭢
lesson
Modal and TooltipFullstack Web ComponentsYou'll scaffold two custom elements that leverage DialogComponent to display modals and tooltips.
lesson
DialogComponentFullstack Web ComponentsYou'll make a configurable dialog with custom elements.
lesson
Mocking the Dialog in StorybookFullstack Web ComponentsYou'll mock the DialogComponent in Storybook.
lesson
HTML TemplatesFullstack Web ComponentsYou'll learn how to code a common UX pattern (dialogs) using HTML templates and custom elements.
lesson
Making the Table EditableFullstack Web ComponentsYou'll learn about how to create a separation of concerns between the many custom elements that comprise the editable table.
lesson
Coding Compound ComponentsFullstack Web ComponentsYou'll learn about three methods for custom elements to communicate, attribute drilling, CustomEvent, and BroadcastChannel.
lesson
Mocking Table Data in StorybookFullstack Web ComponentsHow to use mock data in Storybook to code Web Components.
lesson
Component CommunicationFullstack Web ComponentsYou'll investigate multiple methods for components to communicate by coding an editable table.
lesson
Chapter Four SummaryFullstack Web ComponentsIn this chapter you learned how to code a micro-library with TypeScript decorators that streamlines Web Component development.
lesson
Method DecoratorFullstack Web ComponentsYou'll code a method decorator named Listen that binds event listeners to class methods.
lesson
Class DecoratorFullstack Web ComponentsHow to code an interface for Web Components with TypeScript decorators that enables declaration of the selector, styles, and template.
lesson
Micro-libraryFullstack Web ComponentsYou'll abstract common patterns intro reusable code in a micro-library powered by TypeScript Decorators.