Fundamentals of Web Components

Learn web components api of custom elements, shadow dom and templates

4.63 (79 reviews)
Udemy
platform
English
language
Web Development
category
Fundamentals of Web Components
414
students
4.5 hours
content
Mar 2024
last update
$59.99
regular price

What you will learn

Web Components API

Create your own custom elements, use them in html like the built in elements

Use templates to create the structure of your elements

Use shadow dom to encapsulate your element

Use slot for composing your custom elements with different elements

Create custom events

Description

Web applications are evolving and frameworks like react, vue, angular, svelte and others, are bringing functionalities like reusable components to make it easier to create huge applications. With web components we can create our custom html elements, just like we do in the other popular web frameworks. But the difference is, web components api is web standard, which means it's coming with the modern browsers. So without requiring additional build process or any other tooling, we can run our code as it is in the browser. All we need is just vanilla javascript knowledge.

Web components has three main APIs. Custom Elements, Shadow DOM and HTML Templates. And in this course we will learn and practice all.

We will learn how we can built custom elements, how we can extend built-in elements. Also we will practice the "template" to make the rendering of our custom element more efficiently.

We are going to practice the Shadow Dom to see it's role in web components. We will see how we can compose our custom element with the markup provided externally. And also we will see our styling options of our elements.

And finally, we will practice, how the events are changed in shadow dom. We will see the issues and we will introduce our solutions.

If you want to build re usable web components without relying onto a third party library, if you want to build applications based on the web standards, then web components is the answer.

Content

Introduction

Introduction
Development Environment

Custom Elements

Custom Element Candidate
First Custom Element
Element Lifecycle
Class Properties and Attributes
Extending Built-in Button
Polyfill

Template and Modules

Extracting Element to Separate Javascript File
Template
Modules

Shadow DOM

Shadow DOM
Closed Shadow DOM
Slot
Styling - Flash of Unstyled Content
Styling - Undefined Element
Styling - Element Host
Styling - Slot
Styling - Part & CSS Custom Props

Events

Custom Input Element
Input Events
Button Click Events

Register Form - Demo

Input with Validation
Registration Form

Reviews

M
November 16, 2023
Great demos. I learned a lot from watching the code being typed out and hearing the reasoning in real time. Much better than just seeing prepared code snippets and then having someone talk about them.
Md
August 29, 2023
Good for quick learner and can get the idea about the concept, but can be create a form will other element also like dropdown and checkbox
Rajkumar
March 12, 2023
This is the best ever course on understanding the basic of web components , highly recommended to understand components under the hood!!
Marius
January 4, 2023
HTML & especially CSS styling & vanilla JS DOM manipulation are explained in too much detail, taking up to much time of the course.
Richard
December 7, 2022
Very very clearly presented. I didn't expect to learn about, to me, the broader power of element attributes and CSS selectors. I'm very excited to refactor my code and implement web components more fully. The course leaves me imagining some very cool implementations. Thank your Mr. Buyukkahraman!
Rob
March 17, 2022
Useful walk-through of customelements and their use. It would help if the source of the individual lectures is available so that it's easier to code along.

Charts

Price

Fundamentals of Web Components - Price chart

Rating

Fundamentals of Web Components - Ratings chart

Enrollment distribution

Fundamentals of Web Components - Distribution chart

Related Topics

3729310
udemy ID
12/26/2020
course created date
1/22/2021
course indexed date
Bot
course submited by