Lessons
view all ⭢
lesson
Chapter Six SummaryFullstack Web ComponentsSummarizing the work completed in DialogComponent, ModalComponent, TooltipComponent, and DialogStack.
lesson
DialogStackFullstack Web ComponentsYou'll control the ordering and event cycle of dialogs with a custom class named DialogStack.
lesson
Querying DOM Across Shadow BoundariesFullstack Web ComponentsYou'll fix an issue faced in the last section by learning how to query for elements across Shadow boundaries.
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.