Thành phần web đang nhận được sự hỗ trợ trên nhiều trình duyệt, cộng đồng đang phát triển rất nhanh chóng và có 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 xây dựng 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? 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 những 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ó mọi ưu điểm của các 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òn có một kiểu đó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 cho đến các chế độ xem phức tạp như bộ chọn ngày. Vì Thành phần web được xây dựng bằng các API nền tảng bao gồm các dữ liệu gốc đó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 chuẩn.
Bạn có thể đã nghe về Thành phần web trước đây – phiên bản ban đầu của thông số 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 trên diện rộng giữa các nhà cung cấp trình duyệt, thế hệ tiếp theo của thông số kỹ thuật Thành phần web – v1 – đang nhận được sự hỗ trợ rộng rãi. Chrome hỗ trợ 2 thông số chính tạo nên Thành phần web – Shadow DOM và Phần tử tuỳ chỉnh kể từ Chrome 53 và Chrome 54. Safari đã chuyển hỗ trợ cho Shadow DOM v1 trong Safari 10 và đã hoàn tất việc triển khai Custom Elements v1 trong WebKit. Firefox hiện đang phát triển Shadow DOM và Phần tử tuỳ chỉnh phiên bản 1. Ngoài ra, cả Shadow DOM và Phần tử tuỳ chỉnh đều đang trong lộ trình phát triển cho Edge.
Để xác định phần tử tuỳ chỉnh mới bằng cách triển khai v1, 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);
Các thông số kỹ thuật mới v1 cực kỳ hiệu quả – chúng tôi đã tổng hợp các hướng dẫn về cách sử dụng Custom Elements v1 (Phần tử tuỳ chỉnh v1) và Shadow DOM v1 để giúp bạn bắt đầu.
webcomponents.org
Cộng đồng Thành phần web cũng đang phát triển rất nhanh chóng. Chúng tôi rất vui mừng khi được chứng kiến sự ra mắt của trang web webcomponents.org mới cập nhật – tâm điểm của cộng đồng về thành phần web — bao gồm một danh mục tích hợp để các nhà phát triển chia sẻ các thành phần của họ.
Trang web webComponent.org chứa thông tin về thông số kỹ thuật của Thành phần web, bản cập nhật và nội dung từ cộng đồng thành phần web, đồng thời hiển thị tài liệu về phần tử nguồn mở và bộ sưu tập thành phần 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ỉ cần sử dụng trực tiếp API Thành phần web cấp thấp. Sau đó, hãy xuất bản phần tử của bạn trên webpartners.org.
Chúc bạn thành phần vui vẻ!