Thành phần web đang được hỗ trợ trên nhiều trình duyệt, cộng đồng đang phát triển nhanh chóng và có một danh mục Thành phần web hoàn toàn mới để tìm chính xác thành phần bạn cần.
Bạn đã bao giờ muốn tạo thành phần JavaScript độc lập của riêng mình để có thể dễ dàng sử dụng trên nhiều dự án hoặc chia sẻ với các nhà phát triển khác bất kể họ sử dụng khung JavaScript nào chưa? Thành phần web có thể phù hợp với bạn.
Thành phần web là một tập hợp các tính năng mới của nền tảng web cho phép bạn tạo các phần tử HTML của riêng mình. Mỗi phần tử tuỳ chỉnh mới có thể có một thẻ tuỳ chỉnh như <my-button> và có tất cả các tính năng của phần tử tích hợp sẵn – phần tử tuỳ chỉnh có thể có các thuộc tính và phương thức, kích hoạt và phản hồi các sự kiện, thậm chí có một kiểu được đóng gói và cây DOM để mang lại giao diện riêng.
Bằng cách cung cấp mô hình thành phần cấp thấp dựa trên nền tảng, Thành phần web cho phép bạn tạo và chia sẻ các phần tử có thể sử dụng lại cho mọi thứ, từ các nút chuyên biệt đến các thành phần hiển thị phức tạp như trình chọn ngày. Vì Thành phần web được tạo bằng API nền tảng bao gồm các nguyên hàm đóng gói mạnh mẽ, nên bạn thậm chí có thể sử dụng các thành phần này trong các thư viện hoặc khung JavaScript khác như thể chúng là các phần tử DOM tiêu chuẩn.
Có thể bạn đã nghe nói về Thành phần web trước đây – một phiên bản ban đầu của thông số kỹ thuật Thành phần web – phiên bản 0 – đã được phát hành trong Chrome 33.
Ngày nay, nhờ sự cộng tác rộng rãi giữa các nhà cung cấp trình duyệt, phiên bản tiếp theo của thông số kỹ thuật Thành phần web – phiên bản 1 – đang nhận được sự hỗ trợ rộng rãi. Chrome hỗ trợ hai thông số kỹ thuật chính tạo nên Thành phần web – Shadow DOM và Custom Elements (Tầng phần tử tuỳ chỉnh) – tương ứng từ Chrome 53 và Chrome 54. Safari đã hỗ trợ Shadow DOM phiên bản 1 trong Safari 10 và đã hoàn tất việc triển khai Phần tử tuỳ chỉnh phiên bản 1 trong WebKit. Firefox hiện đang phát triển Shadow DOM và Custom Elements phiên bản 1. Cả Shadow DOM và Custom Elements đều có trong lộ trình cho Edge.
Để xác định một phần tử tuỳ chỉnh mới bằng cách triển khai phiên bản 1, bạn chỉ cần tạo một lớp mới mở rộng HTMLElement bằng cú pháp ES6 và đăng ký lớp đó với trình duyệt:
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
Thông số kỹ thuật phiên bản 1 mới cực kỳ mạnh mẽ – chúng tôi đã tổng hợp các hướng dẫn về cách sử dụng Thành phần tuỳ chỉnh phiên bản 1 và Shadow DOM phiên bản 1 để giúp bạn bắt đầu.
webcomponents.org
Cộng đồng Thành phần web cũng đang phát triển nhanh chóng. Chúng tôi rất vui khi thấy trang web webcomponents.org mới được ra mắt – tâm điểm của cộng đồng thành phần web – bao gồm cả danh mục tích hợp để nhà phát triển chia sẻ các phần tử của họ.
Trang web webcomponents.org chứa thông tin về specs của Thành phần web, nội dung cập nhật và nội dung của cộng đồng thành phần web, đồng thời hiển thị tài liệu về các phần tử nguồn mở và bộ sưu tập các phần tử do các nhà phát triển khác tạo.
Bạn có thể bắt đầu tạo phần tử đầu tiên bằng cách sử dụng một thư viện như Polymer của Google hoặc chỉ sử dụng trực tiếp API Thành phần web cấp thấp. Sau đó, hãy phát hành phần tử của bạn trên webcomponents.org.
Chúc bạn thành công trong việc tạo thành phần!