Đó không phải là nhiều. Vì vậy, khi bạn hoàn thành công việc trên trang đích và bắt đầu trên trang liên hệ, bạn chỉ cần tạo một tệp HTML mới và sao chép tất cả mã từ trang đầu tiên

Đầu trang và chân trang đã trông đẹp mắt và tất cả những gì bạn cần làm là thay đổi phần còn lại của nội dung

Nhưng nếu khách hàng của bạn muốn 10 trang thì sao?

Đột nhiên, bất kỳ thay đổi nào, dù nhỏ đến đâu, đều phải được lặp lại trên tất cả các tệp đó

Đây là một trong những vấn đề lớn như React hoặc Handlebars. js giải quyết. bất kỳ mã nào, đặc biệt là những thứ có cấu trúc như đầu trang hoặc chân trang, có thể được viết một lần và dễ dàng sử dụng lại trong suốt dự án

Cho đến gần đây, không thể sử dụng các thành phần trong vanilla HTML và JavaScript. Nhưng với sự ra đời của Thành phần web, có thể tạo các thành phần có thể tái sử dụng mà không cần sử dụng những thứ như React

Thành phần web là gì?

Thành phần web thực sự là tập hợp của một số công nghệ khác nhau cho phép bạn tạo các phần tử HTML tùy chỉnh

Những công nghệ đó là

• mẫu HTML. Các đoạn đánh dấu HTML sử dụng các phần tử
  5 sẽ không được hiển thị cho đến khi chúng được thêm vào trang bằng JavaScript
• yếu tố tùy chỉnh. Các API JavaScript được hỗ trợ rộng rãi cho phép bạn tạo các phần tử DOM mới. Khi bạn tạo và đăng ký một thành phần tùy chỉnh bằng các API này, bạn có thể sử dụng nó tương tự như một thành phần React
• Bóng DOM. Một DOM nhỏ hơn, được đóng gói, được tách biệt khỏi DOM chính và được hiển thị riêng. Bất kỳ kiểu dáng và tập lệnh nào bạn tạo cho các thành phần tùy chỉnh của mình trong Shadow DOM sẽ không ảnh hưởng đến các thành phần khác trong DOM chính

Chúng ta sẽ đi sâu vào từng vấn đề này một chút trong suốt hướng dẫn

Cách sử dụng các mẫu HTML

Phần đầu tiên của câu đố là học cách sử dụng các mẫu HTML để tạo đánh dấu HTML có thể tái sử dụng

Hãy xem một ví dụ về tin nhắn chào mừng đơn giản

chỉ mục. html

Nếu bạn nhìn vào trang, cả phần tử

6 hoặc

7 đều không được hiển thị. Nhưng nếu bạn mở bảng điều khiển dành cho nhà phát triển, bạn sẽ thấy cả hai yếu tố đã được phân tích cú pháp

Để thực sự hiển thị thông báo chào mừng, bạn sẽ cần sử dụng một chút JavaScript

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

index. js

Mặc dù đây là một ví dụ khá đơn giản, nhưng bạn đã có thể thấy việc sử dụng các mẫu giúp dễ dàng sử dụng lại mã trong một trang như thế nào.

Vấn đề chính là, ít nhất là với ví dụ hiện tại, mã thông báo chào mừng được trộn lẫn với phần còn lại của nội dung trang. Nếu bạn muốn thay đổi thông báo chào mừng sau này, bạn sẽ cần thay đổi mã trên nhiều tệp

Thay vào đó, bạn có thể kéo mẫu HTML vào tệp JavaScript, do đó, bất kỳ trang nào có JavaScript sẽ hiển thị thông báo chào mừng

chỉ mục. html

const template = document.createElement('template');

template.innerHTML = `
  
Hello, World!
  
And all who inhabit it
`;

document.body.appendChild(template.content);

chỉ mục. js

Bây giờ mọi thứ đã có trong tệp JavaScript, bạn không cần tạo phần tử

5 nữa – bạn có thể dễ dàng tạo một phần tử

9 hoặc

const template = document.createElement('template');

template.innerHTML = `
  
Hello, World!
  
And all who inhabit it
`;

document.body.appendChild(template.content);

0

Tuy nhiên, các phần tử

5 có thể được ghép nối với một phần tử

const template = document.createElement('template');

template.innerHTML = `
  
Hello, World!
  
And all who inhabit it
`;

document.body.appendChild(template.content);

2, cho phép bạn thực hiện những việc như thay đổi văn bản cho các phần tử trong

5. Nó hơi nằm ngoài phạm vi của hướng dẫn này, vì vậy bạn có thể đọc thêm về các phần tử

const template = document.createElement('template');

template.innerHTML = `
  
Hello, World!
  
And all who inhabit it
`;

document.body.appendChild(template.content);

2

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

Một điều bạn có thể nhận thấy với các mẫu HTML là có thể khó chèn mã của bạn vào đúng chỗ. Ví dụ về tin nhắn chào mừng trước đó vừa được thêm vào trang

Nếu đã có nội dung trên trang, chẳng hạn như hình ảnh biểu ngữ, thì thông báo chào mừng sẽ xuất hiện bên dưới nội dung đó

Là một phần tử tùy chỉnh, thông báo chào mừng của bạn có thể trông như thế này

4

Và bạn có thể đặt nó ở bất cứ đâu bạn muốn trên trang

Với ý nghĩ đó, chúng ta hãy xem các yếu tố tùy chỉnh và tạo các yếu tố đầu trang và chân trang giống như React của riêng chúng ta

Cài đặt

Đối với một trang web danh mục đầu tư, bạn có thể có một số mã soạn sẵn giống như thế này

5chỉ mục. html

6phong cách. css

Mỗi trang sẽ có đầu trang và chân trang giống nhau, vì vậy sẽ rất hợp lý khi tạo một phần tử tùy chỉnh cho từng trang đó

Hãy bắt đầu với tiêu đề

Xác định phần tử tùy chỉnh

Đầu tiên, tạo một thư mục có tên là

const template = document.createElement('template');

template.innerHTML = `
  
Hello, World!
  
And all who inhabit it
`;

document.body.appendChild(template.content);

5 và bên trong thư mục đó, tạo một tệp mới có tên là

const template = document.createElement('template');

template.innerHTML = `
  
Hello, World!
  
And all who inhabit it
`;

document.body.appendChild(template.content);

6 với mã sau

9 thành phần/tiêu đề. js

Nó chỉ là một ES5

const template = document.createElement('template');

template.innerHTML = `
  
Hello, World!
  
And all who inhabit it
`;

document.body.appendChild(template.content);

7 đơn giản khai báo thành phần

const template = document.createElement('template');

template.innerHTML = `
  
Hello, World!
  
And all who inhabit it
`;

document.body.appendChild(template.content);

8 tùy chỉnh của bạn, với phương thức

const template = document.createElement('template');

template.innerHTML = `
  
Hello, World!
  
And all who inhabit it
`;

document.body.appendChild(template.content);

9 và từ khóa

40 đặc biệt. Bạn có thể đọc thêm về những điều đó trên MDN

Bằng cách mở rộng lớp

41 chung, bạn có thể tạo bất kỳ loại phần tử nào bạn muốn. Cũng có thể mở rộng các yếu tố cụ thể như

42

Đăng ký phần tử tùy chỉnh của bạn

Trước khi bạn có thể bắt đầu sử dụng phần tử tùy chỉnh của mình, bạn cần phải đăng ký phần tử đó bằng phương thức

43

7thành phần/tiêu đề. js

Phương thức này có ít nhất hai đối số

Đầu tiên là

44 bạn sẽ sử dụng khi thêm thành phần vào trang, trong trường hợp này là

45

Tiếp theo là lớp của thành phần mà bạn đã tạo trước đó, ở đây, lớp

const template = document.createElement('template');

template.innerHTML = `
  
Hello, World!
  
And all who inhabit it
`;

document.body.appendChild(template.content);

8

Đối số thứ ba tùy chọn mô tả phần tử HTML hiện có nào mà phần tử tùy chỉnh của bạn kế thừa các thuộc tính từ đó, ví dụ:

47. Nhưng chúng tôi sẽ không sử dụng tính năng này trong hướng dẫn này

Sử dụng Gọi lại vòng đời để thêm tiêu đề vào trang

Có bốn lệnh gọi lại vòng đời đặc biệt dành cho các phần tử tùy chỉnh mà chúng tôi có thể sử dụng để nối phần đánh dấu tiêu đề vào trang.

48,

49,

50 và

51

Trong số các cuộc gọi lại này,

48 là một trong những cuộc gọi được sử dụng phổ biến nhất.

48 chạy mỗi khi phần tử tùy chỉnh của bạn được chèn vào DOM

Bạn có thể đọc thêm về các callback khác

Đối với ví dụ đơn giản của chúng tôi,

48 là đủ để thêm tiêu đề vào trang

9 thành phần/tiêu đề. js

Sau đó, trong

55, thêm tập lệnh

56 và

45 ngay phía trên phần tử

58

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

0chỉ số. html

Và thành phần tiêu đề có thể tái sử dụng của bạn sẽ được hiển thị trên trang

Giờ đây, việc thêm tiêu đề vào trang dễ dàng như thêm thẻ

59 chỉ vào

56 và thêm

45 vào bất cứ đâu bạn muốn

Lưu ý rằng, vì tiêu đề và kiểu dáng của nó được chèn trực tiếp vào DOM chính, nên có thể tạo kiểu cho nó trong tệp

62

Nhưng nếu bạn xem các kiểu tiêu đề có trong

48, chúng khá chung chung và có thể ảnh hưởng đến các kiểu khác trên trang

Ví dụ: nếu chúng tôi thêm Font Awesome và thành phần chân trang vào

55

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

1chỉ số. html

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

2thành phần/chân trang. js

Đây là giao diện của trang

Kiểu dáng từ thành phần chân trang sẽ ghi đè kiểu dáng cho tiêu đề, thay đổi màu của liên kết. Đó là hành vi được mong đợi đối với CSS, nhưng sẽ rất tuyệt nếu kiểu dáng của từng thành phần nằm trong phạm vi của thành phần đó và sẽ không ảnh hưởng đến những thứ khác trên trang

Chà, đó chính xác là nơi mà Shadow DOM tỏa sáng. Hay sắc thái?

Cách sử dụng Shadow Dom với các yếu tố tùy chỉnh

Shadow DOM hoạt động như một phiên bản riêng biệt, nhỏ hơn của DOM chính. Thay vì hoạt động như một bản sao của DOM chính, Shadow DOM giống như một cây con chỉ dành cho phần tử tùy chỉnh của bạn. Mọi thứ được thêm vào Shadow DOM, đặc biệt là các kiểu, đều nằm trong phạm vi phần tử tùy chỉnh cụ thể đó

Theo một cách nào đó, nó giống như sử dụng

65 và

66 thay vì

67

Hãy bắt đầu bằng cách tái cấu trúc thành phần tiêu đề

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

3thành phần/tiêu đề. js

Điều đầu tiên bạn cần làm là sử dụng phương pháp

68 để đính kèm gốc bóng tối vào phần tử thành phần tiêu đề tùy chỉnh của bạn. Trong

48, thêm đoạn mã sau

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

4 thành phần/tiêu đề. js

Lưu ý rằng chúng tôi đang chuyển một đối tượng tới

68 với một tùy chọn,

91. Điều này chỉ có nghĩa là DOM bóng của thành phần tiêu đề không thể truy cập được từ JavaScript bên ngoài

Nếu bạn muốn thao tác với shadow DOM của thành phần tiêu đề sau này bằng JavaScript bên ngoài tệp

56, chỉ cần thay đổi tùy chọn thành

93

Cuối cùng, thêm

94 vào trang bằng phương pháp

95

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

5 thành phần/tiêu đề. js

Và bây giờ, vì các kiểu của thành phần tiêu đề được gói gọn trong Shadow DOM của nó, nên trang sẽ trông như thế này

Và đây là thành phần chân trang được cấu trúc lại để sử dụng Shadow DOM

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

6 thành phần/chân trang. js

Nhưng nếu bạn kiểm tra trên trang, bạn sẽ nhận thấy rằng các biểu tượng Font Awesome hiện đã bị thiếu

Giờ đây, thành phần chân trang được gói gọn trong Shadow DOM của riêng nó, thành phần này không còn có quyền truy cập vào liên kết Font Awesome CDN trong

55

Hãy xem nhanh lý do tại sao lại như vậy và cách để Font Awesome hoạt động trở lại

Đóng gói và Shadow DOM

Mặc dù Shadow DOM không ngăn các kiểu từ các thành phần của bạn ảnh hưởng đến phần còn lại của trang, nhưng một số kiểu chung vẫn có thể rò rỉ qua các thành phần của bạn

Trong các ví dụ trên, đây là một tính năng hữu ích. Ví dụ: thành phần chân kế thừa khai báo

97 được đặt trong

62. Điều này là do

99 là một trong số ít tài sản thừa kế, cùng với

70,

71,

72, v.v.

Nếu bạn muốn ngăn hành vi này và tạo kiểu hoàn toàn cho từng thành phần từ đầu, bạn có thể làm điều đó chỉ với một vài dòng CSS

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

7

73 là bộ chọn giả chọn phần tử đang lưu trữ Shadow DOM. Trong trường hợp này, đó là thành phần tùy chỉnh của bạn

Sau đó, khai báo

74 đặt tất cả các thuộc tính CSS trở lại giá trị ban đầu của chúng. Và

75 làm điều tương tự cho thuộc tính

76 và đặt nó trở lại mặc định của trình duyệt,

77

Để biết danh sách đầy đủ các thuộc tính kế thừa CSS, hãy xem câu trả lời này trên Stack Overflow

Cách sử dụng phông chữ tuyệt vời với Shadow DOM

Bây giờ bạn có thể đang nghĩ, nếu

70,

71 và các thuộc tính CSS liên quan đến phông chữ khác là các thuộc tính có thể kế thừa, thì tại sao Font Awesome không tải ngay bây giờ khi thành phần chân trang đang sử dụng Shadow DOM?

Hóa ra, đối với những thứ như phông chữ và các nội dung khác, chúng cần được tham chiếu trong cả DOM chính và DOM bóng để hoạt động bình thường

May mắn thay, có một số cách đơn giản để khắc phục điều này

Ghi chú. Tất cả các phương pháp này vẫn yêu cầu rằng Phông chữ tuyệt vời được bao gồm trong

55 với phần tử

91 như trong đoạn mã trên

#1. Liên kết đến phông chữ tuyệt vời trong thành phần của bạn

Cách đơn giản nhất để Font Awesome hoạt động trong thành phần Shadow DOM của bạn là thêm một

91 vào nó trong chính thành phần đó

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

8 thành phần/chân trang. js

Một điều cần lưu ý là, mặc dù có vẻ như bạn đang khiến trình duyệt tải Font Awesome hai lần (một lần cho DOM chính và một lần nữa cho thành phần), các trình duyệt đủ thông minh để không tìm nạp lại cùng một tài nguyên

Đây là tab mạng cho thấy rằng Chrome chỉ tải xuống Phông chữ tuyệt vời một lần

#2. Nhập phông chữ tuyệt vời trong thành phần của bạn

Tiếp theo, bạn có thể sử dụng

93 và

94 để tải Font Awesome vào thành phần của mình

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

9

Lưu ý rằng URL phải giống với URL bạn đang sử dụng trong

55

#3. Sử dụng JavaScript để tự động tải phông chữ tuyệt vời cho thành phần của bạn

Cuối cùng, cách DRYest để tải Font Awesome trong thành phần của bạn là sử dụng một chút JavaScript

0thành phần/chân trang. js

Phương pháp này dựa trên câu trả lời này trên Stack Overflow và hoạt động khá đơn giản. Khi thành phần tải, tồn tại một phần tử ________ 391 trỏ đến Phông chữ tuyệt vời, sau đó nó được sao chép và nối vào các thành phần Shadow DOM

Mã cuối cùng

Đây là mã cuối cùng trên tất cả các tệp trông như thế nào và sử dụng phương pháp #3 để tải Phông chữ Tuyệt vời vào thành phần chân trang

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

1chỉ số. html

2phong cách. css

3thành phần/tiêu đề. js

4thành phần/chân trang. js

Kết thúc

Chúng tôi đã đề cập rất nhiều ở đây và bạn có thể đã quyết định chỉ sử dụng React hoặc Handlebars. thay vào đó là js

Đó là cả hai lựa chọn tuyệt vời

Tuy nhiên, đối với một dự án nhỏ hơn, nơi bạn chỉ cần một vài thành phần có thể tái sử dụng, toàn bộ thư viện hoặc ngôn ngữ tạo khuôn mẫu có thể là quá mức cần thiết

Hy vọng rằng bây giờ bạn đã tự tin để tạo các thành phần HTML có thể tái sử dụng của riêng mình. Bây giờ hãy ra khỏi đó và tạo ra thứ gì đó tuyệt vời (và có thể tái sử dụng)

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Kris Koishigawa

Đọc thêm bài viết

---

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Làm cách nào để tạo đầu trang và chân trang trong HTML bằng Bootstrap?

Làm cách nào để đưa tệp HTML vào HTML bằng HTML5?