Quy tắc ánh xạ giữa thành phần Angular và phần tử tùy chỉnh dựa trên khái niệm về "elements" trong Web Components. Trong Angular, bạn có thể tạo một custom element bằng cách sử dụng Angular Elements, một gói cho phép bạn đóng gói các thành phần Angular dưới dạng các phần tử tùy chỉnh có thể sử dụng được mọi nơi, ngay cả trong các ứng dụng không phải là Angular.
Để thực hiện việc này, bạn cần định nghĩa một thành phần Angular như bình thường, sau đó sử dụng hàm createCustomElement từ @angular/elements để chuyển đổi thành phần đó thành một class custom element. Sau đó, bạn có thể đăng ký custom element này với trình duyệt thông qua customElements.define, cung cấp tên tag cho phần tử và class đã được chuyển đổi.
Khi đã đăng ký, phần tử tùy chỉnh này có thể được sử dụng như một HTML tag thông thường trong mã HTML của bạn. Các thuộc tính của thành phần Angular sẽ được ánh xạ thành các thuộc tính của custom element, và các sự kiện của thành phần sẽ được ánh xạ thành các sự kiện DOM mà bạn có thể lắng nghe.
Ví dụ, nếu bạn có một thành phần Angular với selector là app-example, bạn có thể định nghĩa một custom element như sau:
