Có một bộ thẻ HTML, phần tử css và mã JavaScript tiêu chuẩn mà bạn có thể sử dụng trong bất kỳ trình duyệt nào, chẳng hạn như div và font-weight và cảnh báo, nhưng lý do khiến bất kỳ bộ nào trong số đó hoạt động là quy trình gồm hai bước
- Ai đó viết ra những gì tất cả các thẻ và kiểu đó nên làm và ghi lại chúng trong Tiêu chuẩn HTML, thông số CSS, thông số ngôn ngữ ECMAScript, thông số API Web, v.v.
- Một người khác tạo một trình duyệt thực hiện tất cả các tiêu chuẩn đó, để độ dày phông chữ làm cho văn bản của bạn có vẻ đậm, không có màu đỏ
Điều này dẫn đến một trải nghiệm thú vị, có thể dự đoán được, không giống như ngày xưa khi IE và Netscape từng tạo các thẻ độc quyền của riêng họ chỉ hoạt động trong trình duyệt của riêng họ. Nếu bạn đã ở đây đủ lâu, bạn sẽ nhớ mình đã nhìn thấy những thứ này nằm rải rác trên mạng, thường là khi một trang web chỉ hoạt động tốt trong một trình duyệt duy nhất
Nhưng giờ đây, các tiêu chuẩn và việc tuân thủ các tiêu chuẩn là tên của trò chơi và sự khác biệt giữa các trình duyệt chính là ở các tính năng mà chúng cung cấp [đồng bộ hóa dấu trang, chặn quảng cáo, v.v.], chứ không phải ở cách chúng hiển thị các trang web. Đó là một đôi bên cùng có lợi cho tất cả mọi người
Chúng ta có thể sử dụng các phần tử HTML tiêu chuẩn và áp dụng các kiểu CSS tiêu chuẩn cho các phần tử đó
div { background: #ff6; color: red; }
Sample!
và chúng tôi sẽ luôn nhận được một hộp có nền màu vàng và văn bản màu đỏ
Vật mẫu
Nhưng mà. nếu chúng ta không muốn tất cả các hộp div của mình có nền màu vàng thì sao?
div { background: #ff6; color: red; }
div.blue { background: #6cf; }
Sample!
Sample 2!và các kiểu mới được áp dụng cho div thứ hai
Vật mẫu
mẫu 2
Nhưng nhưng. điều gì sẽ xảy ra nếu bạn không muốn tiếp tục áp dụng lớp đó cho các div có màu xanh lam?
div { background: #ff6; color: red; }
angrydiv { background: red; color: white; display: block; }
Sample!
Arrrg!Điều đó hoàn toàn có thể làm được. Chỉ cần tạo một phần tử mới, sau đó sử dụng các kiểu css tiêu chuẩn để tạo cho nó giao diện bạn muốn
Vật mẫu
ArrrgThật thú vị khi điều này hoạt động, nhưng nó hoàn toàn có thể dự đoán được và hoạt động trong mọi trình duyệt tôi đã thử, vì vậy tôi tưởng tượng có điều gì đó trong thông số kỹ thuật cho phép điều đó. Nếu bạn biết ở đâu, hãy để lại nhận xét. Tôi muốn kiểm tra xem nó ra
Hạn chế ở đây là bạn không thể mở rộng các phần tử hiện có hoặc chỉ phát minh ra các phần tử mới làm điều gì đó ngoài cách css có thể thay đổi giao diện của chúng. Giống như, bạn không thể chỉ tạo một phần tử "có thể gây lỗi" và sử dụng phần tử đó với các phần tử tr và td bên trong nó, bởi vì trình duyệt sử dụng tất cả các phần tử đó kết hợp và không biết phải làm gì với td nếu nó không được lồng trong một . Rất có thể, nó sẽ chỉ hiển thị tất cả văn bản của bạn trên một dòng thay vì ở định dạng bảng
Nhưng css có thể làm được rất nhiều. Bạn có thể có các div hoạt động giống như các bảng, sau đó tạo một hàng lỗi, hàng lỗi, v.v. Tôi không nói rằng đó là một ý tưởng tuyệt vời. Trên thực tế, nó không cung cấp nhiều thứ hơn là chỉ gán một lớp cho bảng, đặc biệt nếu bạn không viết trang web bằng tay bằng HTML. Đó chỉ là một sự kỳ lạ thú vị
Tại vì? . Các trang web trên đó rất tệ. theo một cách wow-các-trang-xấu-vậy-tại-sao-làm-tôi-vẫn-cảm-thấy-hoài-cổ
Đây là một số thành phần dựa trên các thành phần CSS đó [tôi nghĩ ban đầu tôi lấy những thành phần này từ Brad Gessler, nhưng tôi đã mất liên kết trực tiếp]
làm mờ-
làm mờ-
gương-
lộn ngược
rumble-
shudder-
Vẫn ở đây?
Khi tôi tìm kiếm những hình ảnh nút trình duyệt ở đầu bài đăng này, tôi tình cờ thấy một thứ từ 20 năm trước vẫn còn nguyên vẹn. Tôi thích tìm những thứ này. Internet là gì? . Không có gì
Bạn đã bao giờ nghĩ đến việc tạo phần tử HTML của riêng mình chưa? . Điều thường xảy ra với các phần tử của bạn là chúng được biên dịch thành một số Javascript, xử lý DOM
Nhưng còn việc thực sự tạo một phần tử HTML thì sao? . Khi kết thúc hướng dẫn này, bạn sẽ có thể tạo phần tử HTML cơ bản của riêng mình
Để bắt đầu, hãy tạo một thư mục mới để chứa mã từ hướng dẫn này. Mở thư mục đó và tạo ba tệp có tên
div { background: #ff6; color: red; }
angrydiv { background: red; color: white; display: block; }
Sample!
Arrrg!
Custom Element
Hello World
Custom Element
Hello World
Chúng ta sẽ bắt đầu với bản tóm tắt HTML thông thường như bên dưới
Custom Element
Bây giờ chúng ta đã có mã HTML cơ bản, hãy đặt tên cho phần tử của chúng ta. Tôi sẽ đặt tên nó là hello-world, một cái tên khá đơn giản ;]
Bây giờ, hãy thêm phần tử của bạn vào mã HTML, giữa các thẻ body phía trên thẻ script. Bạn có thể thêm bất kỳ văn bản nào giữa các thẻ phần tử của mình. HTML cuối cùng của bạn sẽ giống như
Custom Element
Hello World
Chúng ta đã hoàn thành mã HTML; . Tạo một lớp có tên
Custom Element
Hello World
Bây giờ, chúng ta cần xác định phần tử của mình để trình duyệt biết rằng chúng ta đang tạo một phần tử mới sẽ được sử dụng lại. Sau lớp, thêm dòng mã sau
customElements.define["hello-world", HelloWorld]
Cái này là cái gì? . Phải mất hai đối số
- tên thành phần [phải giống hệt như tên được sử dụng trong mã HTML]
- lớp của phần tử
Sau đó, chúng tôi sẽ tạo một lớp để có một phần tử tùy chỉnh với các thuộc tính và thuộc tính của riêng chúng tôi. Điều này cũng cho phép chúng tôi thêm trình xử lý sự kiện, chức năng và hành vi của riêng mình
Bây giờ bạn đã tạo phần tử HTML tùy chỉnh của riêng mình. Bạn nên thêm một
Custom Element
Hello World
Custom Element
Hello World
Với những bổ sung này, lớp của bạn sẽ trông giống như
div { background: #ff6; color: red; }
div.blue { background: #6cf; }
Sample!
Sample 2!Bạn cũng có thể xác định các phương thức tùy chỉnh như bên dưới
div { background: #ff6; color: red; }
div.blue { background: #6cf; }
Sample!
Sample 2!Ở trên, chúng tôi đã tạo một phương thức trên phần tử có tên là
Custom Element
Hello World
Bạn có thể chọn phần tử tùy chỉnh của mình từ Javascript giống như cách bạn làm với bất kỳ phần tử nào khác bằng cách sử dụng
Custom Element
Hello World
Custom Element
Hello World
Custom Element
Hello World
Custom Element
Hello World
Chúng tôi đã tạo phần tử của riêng mình chỉ bằng HTML và Javascript, nhưng làm cách nào tôi có thể truy cập các móc vòng đời giống như trong React hoặc Vue?
Sử dụng lớp đã xác định của bạn, bạn cũng có thể có quyền truy cập vào các phương thức vòng đời, cho phép bạn thực thi một số đoạn mã khi, ví dụ, thành phần được kết nối với DOM
Hãy xem ví dụ dưới đây
div { background: #ff6; color: red; }
angrydiv { background: red; color: white; display: block; }
Sample!
Arrrg!Phương thức connectCallback sẽ được thực thi khi phần tử được kết nối với DOM. Trong ví dụ này, chúng tôi đang kiểm tra xem phần tử có thuộc tính
// Creating my own custom HTML element
class HelloWorld extends HTMLElement {
}
div { background: #ff6; color: red; }
angrydiv { background: red; color: white; display: block; }
Sample!
Arrrg!Bây giờ chúng ta có một yếu tố cơ bản đang hoạt động
Thật tốt khi lưu ý rằng
2 không phải là cái móc duy nhất. Chúng tôi cũng có// Creating my own custom HTML element class HelloWorld extends HTMLElement { }3 và// Creating my own custom HTML element class HelloWorld extends HTMLElement { }4// Creating my own custom HTML element class HelloWorld extends HTMLElement { }
Còn kiểu dáng thì sao? . Trong tệp CSS của tôi, tôi đã thêm một số kiểu dáng cơ bản để làm cho nó trông đẹp hơn một chút
div { background: #ff6; color: red; }
angrydiv { background: red; color: white; display: block; }
Sample!
Arrrg!Bạn đã đến cuối bài viết này. tôi hy vọng bạn thích nó. Nếu bạn đã làm, hãy đảm bảo theo dõi tôi trên Twitter. Tôi thường tweet về công nghệ, thử nghiệm và mẹo/lời khuyên
Chúng tôi có thể tạo thẻ mới trong HTML không?
Các thẻ mới trong HTML là gì?
Cách thêm thẻ dữ liệu trong HTML?
12 thẻ HTML cơ bản là gì?
,
,