lesson

Reviewing the work completed on the form-associated custom element TextInputComponent.

Steve Belovarich

lesson

You'll update the Story and provide the missing APIs to TextInputComponent that allow the component to fully interact with a HTML form.

Steve Belovarich

lesson

We'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.

Steve Belovarich

lesson

You'll style the various interaction states of the TextInputComponent form-associated custom element.

Steve Belovarich

lesson

Using observedAttributes and attributeChangedCallback to listen and react to changes in custom element attributes.

Steve Belovarich

lesson

Form-associated custom elements don't come with a pattern that validates an entire form, so you'll implement a pattern that allows form validation.

Steve Belovarich

lesson

You'll learn what distinguises a form-associated custom element from an autonomous custom element, the formAssociated property and ElementInternals interface.

Steve Belovarich

lesson

Scaffold a form-associated custom element named TextInputComponent in Storybook.

Steve Belovarich

lesson

Form-associated custom elements allow custom elements to participate in HTML forms. From validation to submission, you'll code a text input end-to-end.

Steve Belovarich

lesson

You built an autonomous custom element with Shadow DOM, HTML templates, and ES Modules. Let's reflect on that.

Steve Belovarich

lesson

Shadow DOM provides encapsulation for styling and template. You'll style CardComponent with CSS in the context of the autonomous custom element's Shadow DOM.

Steve Belovarich

lesson

Before you can develop the CardComponent, you'll need to scaffold the component in Storybook.

Steve Belovarich