Sự khác biệt giữa các thành phần web và các yếu tố tùy chỉnh là gì?

"Thành phần web" và "Thành phần tùy chỉnh" thường được trộn lẫn và các tìm kiếm trên web cho tiêu đề của câu hỏi này chưa tạo ra nhiều sự rõ ràng. Hãy sửa nó đi.

Các phần tử tùy chỉnh là một phần đặc tả của tiêu chuẩn Thành phần Web , cùng với nhập khẩu Shadow DOM, Mẫu và HTML.

Từ thông số kỹ thuật:

Các phần tử tùy chỉnh cung cấp một cách để các tác giả xây dựng các phần tử DOM đầy đủ tính năng của riêng họ. Mặc dù các tác giả luôn có thể sử dụng các yếu tố phi tiêu chuẩn trong tài liệu của họ, với hành vi dành riêng cho ứng dụng được thêm vào sau khi thực tế bằng cách viết kịch bản hoặc tương tự, nhưng các yếu tố đó trong lịch sử không tuân thủ và không có nhiều chức năng. Bằng cách xác định một phần tử tùy chỉnh, các tác giả có thể thông báo cho trình phân tích cú pháp cách xây dựng đúng một phần tử và cách các phần tử của lớp đó sẽ phản ứng với các thay đổi.

Lịch sử

Các đặc điểm kỹ thuật bây giờ là v1 . Các phiên bản trước, v0, đã được sự hỗ trợ từ Chrome 33 , và đã có một API khác nhau, sử dụng document.registerElement- đó là hiện nay bị phản đối .

Sử dụng

Các phần tử tùy chỉnh có thể tự trị (tạo một phần tử mới từ đầu (nghĩa là mở rộng HTMLEuity ) hoặc có thể tùy chỉnh một phần tử HTML hiện có (như HTMLButtonEuity).

// autonomous element
customElements.define("flag-icon", FlagIcon);
// customized <button> element
customElements.define("plastic-button", PlasticButton, { extends: "button" });

Tham số thứ hai cho customElements.define()cuộc gọi là tên của lớp thực hiện hành vi của phần tử. Xem các ví dụ trong thông số kỹ thuật cho các yếu tố tự trị và các yếu tố tích hợp tùy chỉnh .

class PlasticButton extends HTMLButtonElement {
  constructor() {
    super();

    this.addEventListener("click", () => {
      // Draw some fancy animation effects!
    });
  }
}

Các yếu tố tùy chỉnh được hỗ trợ nguyên bản trong một số trình duyệt hiện đại và có thể được đa dạng hóa cho các trình duyệt cũ hơn quay trở lại Safari 7+ và IE11. Xem thêm polyfill v1 .

Mẫu và Shadow DOM

Bằng cách sử dụng Mẫu và Shadow DOM trong một thành phần tùy chỉnh, bạn có thể làm cho phần tử đó dễ xử lý hơn và có thể sử dụng lại.

Mẫu cho phép sử dụng HTML để khai báo cấu trúc của các thành phần tùy chỉnh:

<!-- Template Definition -->
<template id="fancy-element-template">
  <style>
    ...
  </style>
  <div id="container">
    <p>Some fancy markup goes here...</p>
  </div>
</template>

<!-- Custom Element usage -->
<fancy-element></fancy-element>

Shadow DOM cho phép các kiểu, id và các lớp của nội dung được đặt trong phạm vi của chính nó. Điều này ngăn CSS chảy máu hoặc truy cập vào phần bên trong của phần tử tùy chỉnh từ bên ngoài nó.

customElements.define('fancy-element', class extends HTMLElement {
  constructor() {
    super();
    let shadowRoot = this.attachShadow({mode: 'open'});
    const t = document.querySelector('#fancy-element-template');
    const instance = t.content.cloneNode(true);
    shadowRoot.appendChild(instance);
  }
  ...
});

Tìm hiểu thêm

Các bài viết của Nhà phát triển Google :

• Các yếu tố tùy chỉnh v1: các thành phần web có thể tái sử dụng
• Shadow DOM: các thành phần web độc lập