آموزش یک راهنمای عملی برای اجزای وب وانیل

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

بررسی اجمالی دوره Course Overview

• بررسی اجمالی دوره Course Overview

مبانی کامپوننت وب Web Component Fundamentals

• معرفی اجزای وب Introduction to Web Components

• عناصر بومی DOM چیست؟ What Are Native DOM Elements?

• Custom Elements API و روش بازگشت چرخه عمر Custom Elements API and Lifecycle Callback Methods

• گسترش عناصر سفارشی Extending Custom Elements

• گسترش عناصر بومی Extending Native Elements

• با استفاده از Shadow DOM Using the Shadow DOM

• استفاده از الگوهای HTML Using HTML Templates

• استفاده از واردات HTML Using HTML Imports

آناتومی اساسی یک جز Web وب The Basic Anatomy of a Web Component

• مقدمه Introduction

• روش 1: جاوا اسکریپت خالص Method 1: Pure JavaScript

• روش 2: وارد کردن HTML Method 2: HTML Import

• بهترین شیوه های عنصر سفارشی Custom Element Best Practices

• ویژگی های کامپوننت وب Web Component Attributes

• خصوصیات کامپوننت وب Web Component Properties

• وب کامپوننت سایه DOM Web Component Shadow DOM

• اسکلت کامپوننت وب Web Component Skeleton

ایجاد م Ratingلفه رتبه بندی ستاره Creating a Star Rating Component

• مقدمه Introduction

• شماره ورودی The Number Input

• ایجاد بنیاد وب رتبه بندی ستاره Creating the Foundation of the Star Rating Web Component

• پیاده سازی حالت غیرفعال Implementing the Disabled Mode

• افزودن ویژگی Value Adding a Value Property

• اجازه انتخاب کاربر Allowing a User Selection

• مدیریت ویژگی Value Handling the Value Attribute

ایجاد یک جزu منوی اسلاید قابل تنظیم Creating a Configurable Slide out Menu Component

• مقدمه Introduction

• ایجاد بنیاد منوی Slide out Component Web Creating the Foundation of the Slide out Menu Web Component

• یک ظاهر طراحی شده: میزبان Styling the :host

• افزودن مضامین به مuلفه Slide out Menu Adding Themes to the Slide out Menu Component

• اجازه باز و بسته شدن منو Allowing the Menu to Be Opened and Closed

• به کاربران اجازه می دهد محتوای کامپوننت را با شکاف ارائه دهند Allowing Users to Provide Component Content with Slotting

یکپارچه سازی اجزای وب Styling Web Components

• مقدمه ای بر خصوصیات سفارشی CSS An Introduction to CSS Custom Properties

• افزودن یک API سبک به مyلفه وب رتبه بندی ستاره Adding a Styling API to the Star Rating Web Component

• افزودن یک سبک API به Slide out Menu Web Component Adding a Styling API to the Slide out Menu Web Component

• مقدمه ای بر CSSapply Rule An Introduction to the CSS @apply Rule

اجزای آماده وب تولید Production Ready Web Components

• پشتیبانی مرورگر برای مشخصات کامپوننت وب Browser Support for the Web Component Specifications

• انتقال کامپوننت وب رتبه بندی ستاره Transpiling the Star Rating Web Component

• مقدمه ای بر پرکننده ها An Introduction to the Polyfills

• افزودن Polyfills به پروژه Star Web Component Adding the Polyfills to the Star Rating Web Component Project

• با استفاده از ShadyCSS Polyfill Using the ShadyCSS Polyfill