Udemy

Platform

English

Language

Web Development

Category

Fundamentals of Web Components

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

4.00 (1 reviews)

Fundamentals of Web Components

Students

4.5 hours

Content

Apr 2021

Last Update
Regular Price

EXCLUSIVE SKILLSHARE OFFER
Exclusive  SkillShare  Offer
Unlimited access to 30 000 Premium SkillShare courses
30-DAY FREE TRIAL

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

In this course we will learn how we can create our custom html elements. Just like we are creating reusable components we do in react, vue, angular, we can build reusable custom elements with vanilla javascript, by following web standards.

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


3729310

Udemy ID

12/26/2020

Course created date

1/22/2021

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram