A Practical Guide to Vanilla Web Components

سرفصل های دوره

Web Components are set to change how you build front-end web applications. This course teaches you how to use the Web Components specifications to create encapsulated and reusable UI components which can be used with almost any framework or library.

1. Course Overview

1. Course Overview

2. Web Component Fundamentals

1. Introduction to Web Components

2. What Are Native DOM Elements

3. Custom Elements API and Lifecycle Callback Methods

4. Extending Custom Elements

5. Extending Native Elements

6. Using the Shadow DOM

7. Using HTML Templates

8. Using HTML Imports

3. The Basic Anatomy of a Web Component

1. Introduction

2. Method 1 - Pure JavaScript

3. Method 2 - HTML Import

4. Custom Element Best Practices

5. Web Component Attributes

6. Web Component Properties

7. Web Component Shadow DOM

8. Web Component Skeleton

4. Creating a Star Rating Component

1. Introduction

2. The Number Input

3. Creating the Foundation of the Star Rating Web Component

4. Implementing the Disabled Mode

5. Adding a Value Property

6. Allowing a User Selection

7. Handling the Value Attribute

5. Creating a Configurable Slide out Menu Component

1. Introduction

2. Creating the Foundation of the Slide out Menu Web Component

3. Styling the -host

4. Adding Themes to the Slide out Menu Component

5. Allowing the Menu to Be Opened and Closed

6. Allowing Users to Provide Component Content with Slotting

6. Styling Web Components

1. An Introduction to CSS Custom Properties

2. Adding a Styling API to the Star Rating Web Component

3. Adding a Styling API to the Slide out Menu Web Component

4. An Introduction to the CSS @apply Rule

7. Production Ready Web Components

1. Browser Support for the Web Component Specifications

2. Transpiling the Star Rating Web Component

3. An Introduction to the Polyfills

4. Adding the Polyfills to the Star Rating Web Component Project

5. Using the ShadyCSS Polyfill

189,000 تومان

افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: PluralSight