Thành phần Web Phần tử tùy chỉnh

Hướng dẫn giới thiệu về Phần tử tùy chỉnh

Tôi đã viết Phần tử tùy chỉnh đầu tiên của mình bằng thư viện CSS có tên là CSS Doodle. Đó là một ứng dụng tuyệt vời sử dụng Phần tử tùy chỉnh để cho phép bạn tạo các hình ảnh động CSS tuyệt đẹp. Điều đó đã mở ra một mong muốn hoàn toàn mới để tìm ra cách hoạt động của thứ đó. Vì vậy, tôi quyết định xem xét kỹ hơn về Web Components nói chung, một chủ đề mà nhiều người yêu cầu tôi viết về.

Phần tử tùy chỉnh cho phép chúng tôi tạo các thẻ HTML mới.

Tôi không thể tưởng tượng tại sao điều này có thể là một thứ hữu ích cho đến khi tôi sử dụng thư viện CSS Doodle đó. Sau tất cả, chúng tôi đã có rất nhiều thẻ.

Hướng dẫn này bao gồm các Phần tử tùy chỉnh phiên bản 1, phiên bản mới nhất của tiêu chuẩn tại thời điểm viết bài

Sử dụng Phần tử tùy chỉnh, chúng tôi có thể tạo thẻ HTML tùy chỉnh với CSS và JavaScript được liên kết.

Nó không phải là một giải pháp thay thế cho các framework như React, Angular hoặc Vue, nhưng nó là một khái niệm hoàn toàn mới.

Cácwindowđối tượng toàn cầu tiết lộ mộtcustomElementstài sản cung cấp cho chúng tôi quyền truy cập vào mộtCustomElementRegistryvật.

CácCustomElementRegistryvật

Đối tượng này có một số phương pháp mà chúng tôi có thể sử dụng để đăng ký Phần tử tùy chỉnh và truy vấn Phần tử tùy chỉnh đã được đăng ký:

  • define()được sử dụng để xác định một Phần tử tùy chỉnh mới
  • get()được sử dụng để lấy hàm tạo của một Phần tử tùy chỉnh (trả vềundefinednếu không tồn tại)
  • upgrade()để nâng cấp một Phần tử tùy chỉnh
  • whenDefined()được sử dụng để lấy hàm tạo của Phần tử tùy chỉnh. Tương tự vớiget(), nhưng nó trả về một lời hứa thay vào đó sẽ giải quyết khi mặt hàng có sẵn.

Cách tạo phần tử tùy chỉnh

Trước khi chúng tôi có thể gọiwindow.customElements.define(), chúng ta phải xác định một phần tử HTML mới bằng cách tạo một lớp mới mở rộng lớp tích hợp HTMLElement:

class CustomTitle extends HTMLElement {
	//...
}

Bên trong hàm tạo lớp mà chúng ta sẽ sử dụngShadow DOMđể liên kết CSS, JavaScript và HTML tùy chỉnh với thẻ mới của chúng tôi.

Theo cách này, tất cả những gì chúng ta thấy trong HTML là thẻ của chúng ta, nhưng điều này sẽ gói gọn rất nhiều chức năng.

Chúng ta bắt đầu bằng cách khởi tạo hàm tạo:

class CustomTitle extends HTMLElement {
  constructor() {
    super()
    //...
  }
}

Sau đó, chúng tôi gọi làattachShadow()của HTMLElement bằng cách truyền một đối tượng vớimodetài sản được đặt thành'open'. Thuộc tính này đặt chế độ đóng gói cho DOM bóng. Nếu nóopenchúng ta có thể truy cậpshadowRootthuộc tính của một phần tử. Nếu nó đóng cửa, chúng tôi không thể.

Đây là cách làm như vậy:

class CustomTitle extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
    //...
  }
}

Một số ví dụ bạn sẽ thấy sử dụng cú phápconst shadowRoot = this.attachShadow(/* ... */)nhưng bạn có thể tránh như vậy trừ khi bạn đặtmodeđếnclosed, vì bạn luôn có thể tham chiếu đối tượng đó bằng cách gọithis.shadowRoot.

Đó là những gì chúng ta sẽ làm bây giờ, để thiết lậpHTML bên trong của nó:

class CustomTitle extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
    this.shadowRoot.innerHTML = `
      <h1>My Custom Title!</h1>
    `
  }
}

Bạn có thể thêm bao nhiêu thẻ tùy thích, bạn không bị giới hạn ở một thẻ bên tronginnerHTMLbất động sản

Bây giờ chúng tôi thêm phần tử mới được xác định này vàowindow.customElements:

window.customElements.define('custom-title', CustomTitle)

và chúng ta có thể sử dụng<custom-title></custom-title>Yếu tố tùy chỉnh trong trang!

Lưu ý: bạn không thể sử dụng thẻ tự đóng (nói cách khác: cái này<custom-title />không được tiêu chuẩn cho phép)

Chú ý-gạch ngang tên thẻ.Chúng tôi bắt buộc phải sử dụng dấu gạch ngangtrong Phần tử tùy chỉnh. Đây là cách chúng tôi có thể phát hiện thẻ tích hợp từ thẻ tùy chỉnh.

Bây giờ chúng ta có phần tử này trong trang và chúng ta có thể làm những gì chúng ta làm với các thẻ khác: nhắm mục tiêu nó bằng CSS và JavaScript!

Cung cấp CSS tùy chỉnh cho phần tử

Trong hàm tạo, bạn có thể truyền mộtstylengoài thẻ HTML xác định nội dung và bên trong bạn có thể có CSS Phần tử tùy chỉnh:

class CustomTitle extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
    this.shadowRoot.innerHTML = `
      <style>
        h1 {
          font-size: 7rem;
          color: #000;
          font-family: Helvetica;
          text-align: center;
        }
      </style>
      <h1>My Custom Title!</h1>
    `
  }
}

Đây là ví dụ về Phần tử tùy chỉnh mà chúng tôi đã tạo, trong Codepen:

Xem bútThành phần web, Tiêu đề tùy chỉnh của tôibởi Flavio Copes (@flaviocopes) trênCodePen.

Tech Wiki Online!