Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Đăng nhập
Xem tất cả kết quả
Menu
Đăng nhập Đăng ký miễn phí

Web Components & Stencil.js - Build Custom HTML Elements

Web Components & Stencil.js - Xây dựng Phần tử HTML Tùy chỉnh

Web Components & Stencil.js - Xây dựng Phần tử HTML Tùy chỉnh

Hướng dẫn Toàn diện về việc xây dựng Phần tử HTML Tùy chỉnh/ Web Components có và không có StencilJS

4.6
(3,885 đánh giá)
19,569 học viên
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
9.0 giờ video
147 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026
#Frontend Development #Javascript #Stencil Js #Web Development

Bạn sẽ học được gì

Tự tạo các phần tử HTML có thể tái sử dụng cho dự án của bạn hoặc chia sẻ với nhà phát triển khác
Vượt qua giới hạn của các phần tử HTML có sẵn chỉ với sức mạnh của HTML, CSS và JavaScript

Yêu cầu

Yêu cầu kiến thức JavaScript cơ bản (cú pháp cơ bản, DOM cơ bản, đối tượng cơ bản)
Kiến thức JavaScript ES6+ (lớp, v.v.) là một lợi thế nhưng không bắt buộc

Đối tượng phù hợp

Dành cho tất cả những ai quan tâm đến việc xây dựng thẻ HTML tùy chỉnh!
Học viên muốn tìm hiểu công nghệ web tiên tiến, có thể sử dụng trong bất kỳ ứng dụng web nào

Nội dung khóa học

10 phần • 144 bài giảng
1 Giới thiệu
2 Web Components - Demo Nhanh
3 Web Components là gì
4 Tham gia Cộng đồng Học trực tuyến của chúng tôi
5 Tại sao chúng ta sử dụng Web Components?
6 So sánh Web Components & Các Framework
7 Nội dung Khóa học
8 Cách tận dụng tối đa khóa học
1 Giới thiệu Mô-đun
2 Hiểu về "let" và "const"
3 Làm việc với Hàm Mũi tên
4 Exports và Imports
5 Hiểu về Lớp (Classes)
6 Lớp, Thuộc tính và Phương thức
7 Toán tử Spread & Rest
8 Ôn tập Hàm Mảng
9 Hiểu về Mã Bất đồng bộ (Async Code)
10 Tổng kết - JavaScript Thế hệ Mới
11 Hàm Mảng trong JS
1 Giới thiệu Mô-đun - Web Components là gì?
2 Hỗ trợ Trình duyệt
3 Thiết lập Môi trường Phát triển
4 Tạo Phần tử Tùy chỉnh Đầu tiên
5 Tương tác với DOM xung quanh
6 Hiểu Vòng đời của Custom Elements
7 Sử dụng "connectedCallback" để Truy cập DOM
8 Lắng nghe Sự kiện Bên trong Component
9 Sử dụng Thuộc tính trên Custom Elements
10 "Thuộc tính" (Attributes) vs "Đặc tính" (Properties)
11 Định kiểu cho Phần tử
12 Sử dụng Shadow DOM
13 Thêm Mẫu HTML (HTML Template)
14 Sử dụng Slots
15 Định nghĩa Mẫu trong JavaScript
16 Sử dụng Thẻ Style trong Shadow DOM
17 Mở rộng Phần tử Có sẵn
18 Gỡ lỗi
19 Tổng kết
20 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Hiểu về Shadow DOM Projection
3 Định kiểu Nội dung "slot" Bên ngoài Shadow DOM
4 Định kiểu Nội dung "slot" Bên trong Shadow DOM
5 Định kiểu Thành phần Host
6 Định kiểu Component từ Bên ngoài
7 Định kiểu Host có Điều kiện
8 Định kiểu với Nội dung Host
9 Định kiểu Động Thông minh với Biến CSS
10 Dọn dẹp Định kiểu Tổng thể
11 Quan sát Thay đổi Thuộc tính
12 Điều chỉnh Hành vi Component khi Thuộc tính Thay đổi
13 Sử dụng "disconnectedCallback"
14 Thêm Phương thức Render
15 Tổng kết
16 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Tạo Component Modal Cơ bản
3 Thêm Vùng chứa Modal
4 Định kiểu Các phần tử Modal
5 Thêm Logic Ứng dụng Tổng quát
6 Mở Modal thông qua CSS
7 Phương thức & Thuộc tính Công khai (Public)
8 Hiểu về Named Slots
9 "slotchange" & Truy cập Nội dung Slot
10 Đóng Modal bằng Nút Modal
11 Phát ra Sự kiện Tùy chỉnh (Dispatching Custom Events)
12 Cấu hình Sự kiện Tùy chỉnh
13 Thêm Cải tiến & Hiệu ứng Modal
14 Tổng kết
15 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Sử dụng Web Components trong Trình duyệt Hiện đại
3 Hỗ trợ Trình duyệt cho Web Components
4 Sử dụng Web Components trong Mọi Trình duyệt
5 Tạo Dự án Stencil
6 Stencil là gì?
7 Stencil.js đằng sau Hậu trường
8 Tìm hiểu Component Stencil Đầu tiên
9 Tổng kết
1 Giới thiệu Mô-đun
2 Sử dụng Máy chủ Phát triển
3 PHẢI ĐỌC: Đảm bảo Import Chính xác
4 Tạo Web Component Stencil Mới
5 Định kiểu Component Stencil
6 Sử dụng Props
7 Quan trọng: Phản ánh Props thành Thuộc tính (Reflect Props to Attributes)
8 Cấu hình Props
9 Sử dụng Slots & Định kiểu
10 Hiển thị Nội dung Có điều kiện
11 Sử dụng Thuộc tính chỉ để Định kiểu
12 Sử dụng Props kết hợp với Thuộc tính
13 Hiểu về Mutable Props
14 Chuẩn bị Tabs
15 Thêm Trình lắng nghe Sự kiện
16 Sử dụng State
17 Thêm Phương thức vào Components
18 Thêm Backdrop
19 Tổng kết
20 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Tạo Component Mới
3 Chuẩn bị Component & API
4 Gửi Biểu mẫu (Submitting Forms)
5 Định kiểu Component
6 Yêu cầu HTTP trong Components
7 Sử dụng Khóa API
8 Truy cập Phần tử Host
9 Sử dụng Tham chiếu (References)
10 Ràng buộc Hai chiều & Xác thực Đầu vào
11 Xử lý Lỗi
12 Sử dụng Vòng đời "componentDidLoad"
13 Tất cả các Vòng đời (Lifecycle Hooks)
14 Sử dụng Vòng đời Cập nhật (Update Lifecycle Hooks)
15 Theo dõi Thay đổi Props
16 Tạo Component Mới
17 Định kiểu Component Mới
18 Xuất Danh sách Phần tử
19 Định kiểu Mục Danh sách
20 Phát ra Sự kiện Tùy chỉnh (Emitting Custom Events)
21 Quan trọng: Trình trang trí Listen (The Listen Decorator)
22 Sử dụng Trình trang trí Listen
23 Sử dụng HostData
24 Thêm Vòng quay Tải (Loading Spinner)
25 Nhúng Component vào Component
26 Sử dụng Thuộc tính CSS (CSS Properties)
27 Sử dụng Stencil.js để Xây dựng Toàn bộ Ứng dụng
28 Tổng kết
29 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Sử dụng Cấu hình Stencil (Stencil Config)
3 Xây dựng & Sử dụng Components
4 Sử dụng Web Components trong Dự án Node.js
5 Xuất bản lên NPM
6 Cài đặt Gói NPM
7 Sử dụng Web Components trong Ứng dụng Angular
8 Sử dụng Web Components trong Ứng dụng React
9 Sử dụng Web Components trong Ứng dụng Vue
10 Polyfills & Internet Explorer
11 IE & Polyfills
12 Tổng kết
13 Tài nguyên & Liên kết Hữu ích
1 Tổng kết Khóa học
2 Tài nguyên & Liên kết Hữu ích
3 Phần thưởng: Thêm Nội dung!

Giới thiệu khóa học

Let's face it: You got hundreds of HTML tags to choose from but some really helpful ones (, , , ...) are missing.

What if you could build your own HTML tags? 

Without frameworks like Angular, libraries like React or expert JavaScript knowledge in general. Just with a magic, native-JavaScript feature called "Web Components" (or "custom HTML elements").

Web Components are a combination of various specifications that are baked into the browser. Getting started with these features is a breeze and you'll quickly be able to build your own powerful and re-usable (even across projects!) custom HTML elements.

Such custom elements don't replace Angular, React or Vue though - instead you can easily use them in ANY web project, including projects using such frameworks and libraries.

In this course, you'll learn this from scratch.

But we won't stop there. Whilst getting started is fairly easy, more complex components will be more difficult to create. Stencil.js is a tool that makes the creation of such native web components much easier by using modern features like TypeScript and JSX (don't know that? No worries, you'll learn it in the course!).

In detail, in this course you will learn:

  • how to build re-usable, lightweight custom HTML elements with native browser features

  • how to build web components of all complexities - from a simple tooltip to modals or side drawers

  • how to pass data into your own web components and use it there

  • how to emit your own custom events which you can listen to in JavaScript

  • how to use the Shadow DOM to scope your CSS styles to your custom elements

  • how to use Stencil.js to get a much easier development workflow

  • how to use the many features Stencil.js provides to build native web components way more efficiently

  • how to deploy/ re-use your own web components in ANY project using ANY JavaScript framework like Angular, React or Vue (or none at all!)

Prerequisites:

  • Basic JavaScript knowledge is a must-have

  • ES6 JavaScript knowledge (const, let, classes, ...) is strongly recommended but not strictly required - a brief refresher is provided as part of the course

  • NO JavaScript framework knowledge (e.g. Angular, React, Vue) is required

  • NO TypeScript or JSX knowledge is required

Let's dive into this exciting technology together!

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Frontend Development
Hiển thị tất cả khoá học Javascript
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊