Học HTML, CSS từ Zero Tới Hero
- Custom Elements là gì?
- Tính chất
- Trường hợp sử dụng
Custom Elements là gì?
Thẻ tùy chỉnh là các thẻ do các bạn tự tạo ra, tự đặt tên và không nằm trong quy chuẩn của W3C.
Việc đặt tên thẻ tùy chỉnh phụ thuộc vào mục đích mà bạn làm và cần đảm bảo tên thẻ được cấu tạo từ 2 từ trở lên.
Ví dụ, khi muốn làm một thông báo dạng toast, thẻ tùy chỉnh có thể có tên là <app-toast> </app-toast>, tương tự với icon sẽ là <app-icon> </app-icon>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Hợp lệ -->
<app-toast></app-toast>
<app-success-message></app-success-message>
<!-- Không hợp lệ -->
<app></app>
<toast></toast>
<icon><icon>
</body>
</html>
Để kiểm tra tên thẻ có hợp lệ hay không, kiểm tra ngay tại W3C Validator.
Tính chất
Các thẻ quy chuẩn luôn có style mặc định. Vi dụ, thẻ <h1> có style mặc định là cỡ chữ lớn, đậm. Thẻ <p> có style mặc định là luôn bắt đầu trên một hàng mới, v.v.
Thẻ tùy chỉnh vẫn hoạt động như các thẻ có quy chuẩn trong W3C. Có thể dùng để hiển thị nội dung nhưng không có style mặc định như các thẻ nằm trong quy chuẩn W3C.
Ví dụ:
<app-text>
Chào mừng các bạn đã gia nhập F8!
</app-text>
Khi viết CSS cho các thẻ tùy chỉnh, chúng vẫn ăn CSS bình thường. Các thẻ tùy chỉnh được viết gần nhau sẽ nằm trên một hàng ngang.
Ví dụ:
<style>
app-text1 {
font-size: 24px;
color: red;
}
</style>
<app-text1>
Chào mừng các bạn đã gia nhập F8!
</app-text1>
<app-toast>
Học lập trình vui vẻ nha!
</app-toast>
Trường hợp sử dụng
Trong khuôn khổ khóa HTML, CSS sẽ chưa thể nhìn rõ lợi ích của thẻ tùy chỉnh. Mình sẽ nói chi tiết hơn trong khóa JavaScript.
Ở phần bài tập tiếp theo, các bạn sẽ được làm quen với ứng dụng của thẻ tùy chỉnh, trong đó có kết hợp thêm JavaScript để tạo ra dạng modal.
Thẻ tủy chỉnh giúp bạn đóng gói một tính năng cho nó. Học tới JavaScript, bạn chỉ cần viết code một lần và có thể lặp lại sử dụng nhiều lần, chỉ cần điều chỉnh để phù hợp với tính năng mong muốn.
Tóm tắt
- Thẻ tùy chỉnh là các thẻ do các bạn tự tạo ra, tự đặt tên và không nằm trong quy chuẩn của W3C.
- Tên thẻ tùy chỉnh được đặt theo mục đích sử dụng, cần đảm bảo có ít nhất 2 từ.
- Thẻ tùy chỉnh không có style mặc định.
- Thẻ tùy chỉnh được dùng để đóng gói một tính năng, viết code một lần và sử dụng được nhiều lần.
Nhận xét