Web components: custom elements and the Shadow DOM
Without a framework, you write reusable, accessible, form-friendly components using custom elements, templates and the Shadow DOM.
Level 401 · 14 lessons · 12 practice labs
Lessons
Foundations
- Defining a custom element: customElements.define
- Lifecycle callbacks
- Attributes, properties and reflection
- Placing content with template and slot
- Short task: a badge component
The Shadow DOM
- The Shadow DOM and style encapsulation
- Styling from outside with ::part, ::slotted and CSS variables
- Events: bubbles, composed and custom events
- Form-associated components: ElementInternals
- Accessibility in components: roles and focus
- Short task: a keyboard-friendly tabs component
Shipping
- Declarative Shadow DOM and server rendering
- Testing components in the browser
- Capstone: a small component library
Practice labs
- Define a badge component: Write a status-badge custom element that takes its colour from a state and use it with three states.
- Update when an attribute changes: Reflect a counter component's value between property and attribute with observedAttributes and attributeChangedCallback.
- Clean up when disconnected: A clock component keeps its timer running after removal; close the leak with lifecycle callbacks.
- Encapsulate styles with Shadow DOM: Page styles are breaking a card component; move it into a Shadow DOM to cut the effect.
- Customise from outside with ::part: Expose an alert component's title and button with part and style them in two themes.
- Arrange slotted content: Write a product card with named slots, style it with ::slotted and handle the empty-slot case.
- Dispatch a custom event: Make a star rating component dispatch a custom event carrying the score and have the page listen for it.
- Make a component join a form: Use ElementInternals so a date picker component submits its value with the form and takes part in validation.
- Write keyboard-friendly tabs: Write a tabs component navigated with arrow keys, with correct roles and focus management.
- Test a component in the browser: Write three tests for the badge component that check attribute changes and event dispatch.
- Render on the server with declarative Shadow DOM: Embed a component's first view in HTML with template shadowrootmode and prove it shows without JavaScript.
- Ship a small component library: Bundle button, alert and modal components with shared theme variables and documentation into one package.
About this course
Without a framework, you write reusable, accessible, form-friendly components using custom elements, templates and the Shadow DOM.
What you will learn
- Foundations
- The Shadow DOM
- Shipping
Prerequisites
You should have practised the topics of the same path up to level 301.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at level 401; it assumes you know the topics of the lower-level courses.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.