Các phương pháp hay nhất về phần tử tuỳ chỉnh

Các phần tử tuỳ chỉnh cho phép bạn tạo thẻ HTML của riêng mình. Danh sách kiểm tra này bao gồm các phương pháp hay nhất để giúp bạn tạo các phần tử chất lượng cao.

Các phần tử tuỳ chỉnh cho phép bạn mở rộng HTML và xác định các thẻ của riêng bạn. Họ là đây là một tính năng vô cùng mạnh mẽ nhưng cũng ở cấp độ thấp, có nghĩa là luôn rõ ràng cách tốt nhất để triển khai yếu tố của riêng bạn.

Để giúp bạn tạo ra trải nghiệm tốt nhất có thể, chúng tôi đã tổng hợp danh sách kiểm tra. Công cụ này chia nhỏ tất cả những yếu tố mà chúng tôi cho rằng cần có để trở thành một hoạt động tốt.

Danh sách kiểm tra

DOM bóng

Thuộc tính và thuộc tính

Sự kiện

Video giải thích

Không ghi đè tác giả trang

Có thể nhà phát triển đang sử dụng phần tử của bạn muốn ghi đè một số trạng thái ban đầu của nó. Ví dụ: thay đổi role ARIA hoặc khả năng lấy tiêu điểm bằng tabindex Kiểm tra xem các thuộc tính này và bất kỳ thuộc tính chung nào khác đã được thiết lập hay chưa, trước khi áp dụng các giá trị của riêng bạn.

connectedCallback() {
  if (!this.hasAttribute('role'))
    this.setAttribute('role', 'checkbox');
  if (!this.hasAttribute('tabindex'))
    this.setAttribute('tabindex', 0);

Đặt thành lazy cho các thuộc tính

Nhà phát triển có thể tìm cách đặt một thuộc tính trên phần tử của bạn trước đã tải định nghĩa. Điều này đặc biệt đúng nếu nhà phát triển đang sử dụng khung xử lý việc tải các thành phần, chèn chúng vào trang và liên kết các thuộc tính của chúng với một mô hình.

Trong ví dụ sau, Angular được tuyên bố liên kết với mô hình của nó isChecked với thuộc tính checked của hộp đánh dấu. Nếu định nghĩa cho hộp kiểm howto-checkbox được tải từng phần, có thể Angular có thể tìm cách thiết lập thuộc tính được đánh dấu trước khi phần tử được nâng cấp.

<howto-checkbox [checked]="defaults.isChecked"></howto-checkbox>

Một phần tử tuỳ chỉnh nên xử lý trường hợp này bằng cách kiểm tra xem có cơ sở lưu trú nào đã được đặt trên thực thể của nó. <howto-checkbox> minh hoạ mẫu này bằng phương thức có tên là _upgradeProperty().

connectedCallback() {
  ...
  this._upgradeProperty('checked');
}

_upgradeProperty(prop) {
  if (this.hasOwnProperty(prop)) {
    let value = this[prop];
    delete this[prop];
    this[prop] = value;
  }
}

_upgradeProperty() ghi lại giá trị từ phiên bản chưa nâng cấp và xoá thuộc tính đó để nó không làm ẩn phương thức setter thuộc tính của riêng phần tử tuỳ chỉnh. Bằng cách này, khi định nghĩa của phần tử cuối cùng đã tải, nó có thể ngay lập tức để phản ánh chính xác trạng thái.

Tránh các vấn đề về tỷ lệ người dùng quay lại

Bạn nên sử dụng attributeChangedCallback() để phản ánh trạng thái cho một thuộc tính cơ bản, ví dụ:

// When the [checked] attribute changes, set the checked property to match.
attributeChangedCallback(name, oldValue, newValue) {
  if (name === 'checked')
    this.checked = newValue;
}

Nhưng điều này có thể tạo ra một vòng lặp vô hạn nếu phương thức setter thuộc tính cũng phản ánh thuộc tính đó.

set checked(value) {
  const isChecked = Boolean(value);
  if (isChecked)
    // OOPS! This will cause an infinite loop because it triggers the
    // attributeChangedCallback() which then sets this property again.
    this.setAttribute('checked', '');
  else
    this.removeAttribute('checked');
}

Một cách khác là cho phép phương thức setter thuộc tính phản ánh đến thuộc tính và để phương thức getter xác định giá trị dựa trên thuộc tính.

set checked(value) {
  const isChecked = Boolean(value);
  if (isChecked)
    this.setAttribute('checked', '');
  else
    this.removeAttribute('checked');
}

get checked() {
  return this.hasAttribute('checked');
}

Trong ví dụ này, việc thêm hoặc xoá thuộc tính cũng sẽ đặt thuộc tính đó.

Cuối cùng, bạn có thể dùng attributeChangedCallback() để xử lý các hiệu ứng phụ như áp dụng các trạng thái ARIA.

attributeChangedCallback(name, oldValue, newValue) {
  const hasValue = newValue !== null;
  switch (name) {
    case 'checked':
      // Note the attributeChangedCallback is only handling the *side effects*
      // of setting the attribute.
      this.setAttribute('aria-checked', hasValue);
      break;
    ...
  }
}