Lessons

lesson

How customized built-in elements can make custom elements more accessible.

Steve Belovarich

lesson

Revist the HTML form by making the user experience more accessible.

Steve Belovarich

lesson

Customized built-ins can't benefit from the encapsulation provided by Shadow DOM, so you'll have to find another way to style ButtonComponent.

Steve Belovarich

lesson

Scaffold the customized built-in element ButtonComponent with Storybook.

Steve Belovarich

lesson

You'll code ButtonComponent, a customized built-in element that inherits accessibility characteristics from HTMLButtonElement.

Steve Belovarich

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