WEB COMPONENTS LÀ GÌ

Web component là tập hòa hợp các Web APIs được cho phép bọn họ tạo ra một thẻ HTML riêng rẽ, mang những đặc tính riêng rẽ, đóng gói, có thể tái thực hiện. Web component được xây dựng bên trên chuẩn web bây giờ, vì vậy sẽ (và sẽ) rất có thể vận động bên trên tất cả những trình để mắt tới, hoàn toàn có thể tương xứng cùng với tất cả các library và framework Javascript có thể thao tác làm việc với HTML.

Bạn đang xem: Web components là gì

Web component là gì?

Web component là tập hợp các Web APIs được cho phép chúng ta tạo ra một thẻ HTML riêng, với những đặc tính riêng biệt, gói gọn, rất có thể tái áp dụng. Web component được xây đắp trên chuẩn web hiện thời, chính vì như vậy sẽ (với sẽ) hoàn toàn có thể vận động trên toàn bộ các trình trông nom, rất có thể tương hợp cùng với tất cả các library cùng framework Javascript rất có thể thao tác làm việc với HTML.Để dễ tưởng tượng thì nó hệt như component của Angular tuyệt React vậy, tất cả điều component này phạm vi sử dụng là trình chú ý luôn luôn, chứ ko gói gọn gàng ở phạm vi framework nữa.

Các đặc điểm cấu thành website component.

Web component dựa trên 3 yếu tố chính:

*

Custom elements

Là một tập phù hợp các Javascript APIs chất nhận được bọn họ tạo ra element riêng với những đặc điểm với hành động riêng rẽ nhằm hoàn toàn có thể cần sử dụng nlỗi những element mặc định kế bên UI.Xem chi tiết tại https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

Shadow DOM

Cũng là 1 trong những tập thích hợp các Javascript APIs giúp bọn chúng ta:

tạo, đi cùng cùng đóng gói một cây DOM vào một trong những custom element - cây DOM này render độc lập với cây DOM bao gồm (window.document)tinh chỉnh những tính năng tương quan đóng gói các nhân tài và styling của cây DOM, tránh xung đột nhiên ra các DOM elements bên ngoài

*

Xem chi tiết trên https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

HTML templates:

Gồm 2 thẻ và , góp chúng ta tạo thành HTML template mà lại câu chữ bên phía trong 2 thẻ này đang ko được render trực tiếp ra bên ngoài nhưng mà chỉ có thể attach và thực hiện với shadow DOM.Xem cụ thể trên https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots

Cách tạo nên một custom element nói chung

1. trước hết bọn họ nên tạo ra một class hoặc function để định nghĩa các tính năng của custom element

class PopUpInfo extends HTMLElement constructor() // Always Điện thoại tư vấn super first in constructor super(); // write element functionality in here ... 2. Đăng kí custom element bởi cách làm CustomElementRegistry.define(). Method này dìm vào 3 params, trước tiên là tên element,thứ 2 là class hoặc function đề cập trên, sản phẩm công nghệ 3 (optional) là element mong kế thừa.

// Define the new elementcustomElements.define("popup-info", PopUpInfo);3.

Xem thêm: Top 6 Bộ Phát Wifi 4G/ 5 Bộ Phát Wifi 4G Tốt Nhất 2021, Gói 4G Siêu Khủng

Nếu sử dụng mang đến shadow DOM thì hoàn toàn có thể thực hiện method Element.attachShadow() vào nội trên class hoặc function. Method này trả về một shadow (root) element, từ element object này chúng ta manipulate shadow DOM bên phía trong nlỗi làm việc với DOM thông thường.

// Create a shadow rootvar shadow = this.attachShadow(mode: "open");// Create spansvar wrapper = document.createElement("span");wrapper.setAttribute("class","wrapper");var inhỏ = document.createElement("span");icon.setAttribute("class","icon");ibé.setAttribute("tabindex", 0);var info = document.createElement("span");info.setAttribute("class","info");// Take attribute content và put it inside the info spanvar text = this.getAttribute("text");info.textContent = text;// Insert iconvar imgUrl;if(this.hasAttribute("img")) imgUrl = this.getAttribute("img"); else imgUrl = "img/mặc định.png";var img = document.createElement("img");img.src = imgUrl;icon.appendChild(img);// Create some CSS khổng lồ apply khổng lồ the shadow domvar style = document.createElement("style");style.textContent = ".wrapper {" +// CSS truncated for brevity// attach the created elements to the shadow domshadow.appendChild(style);shadow.appendChild(wrapper);wrapper.appendChild(icon);wrapper.appendChild(info);4. Nếu thực hiện mang lại custom template ( và ), trước tiên tạo ra element như thông thường cùng với tên template hoặc slot (rất có thể sinh sản bên trên file HTML hoặc tạo thành = JS), tiếp đến clone và attach vào shadow DOM.lấy ví dụ chúng ta định nghĩa ra template vào file HTML:

My paragraph

Tiếp theo bọn họ attach vào shadow DOM:

customElements.define("my-paragraph", class extends HTMLElement constructor() super(); let template = document.getElementById("my-paragraph"); let templateContent = template.content; const shadowRoot = this.attachShadow(mode: "open") .appendChild(templateContent.cloneNode(true)); )5. Cuối cùng sử dụng custom element như một thẻ HTML thông thường.

Tính tương thích

*

Tính ứng dụng

Lúc Này Angular cùng React sẽ hỗ trợ thực hiện Web component. Trong Angular, chúng ta cũng có thể sử dụng thông qua package
angular/elements (https://angular.io/guide/elements), trong react thì straight forward rộng (https://reactjs.org/docs/web-components.html).

Việc vận dụng Web component không có ý nghĩa sâu sắc nhiều khi áp dụng cùng với số đông framework js lừng danh nhỏng Angular, React, ... vị bọn chúng đều phải sở hữu hệ thống thống trị component riêng rẽ, tuy nhiên sẽ sở hữu được chân thành và ý nghĩa lớn vào Việc giúp những framework có ngôn ngữ tầm thường vào câu hỏi tái sử dụng component xuyên thấu nền tảng với thực hiện component mặt sản phẩm công nghệ 3.

Dường như các bạn có thể thử dùng một số trong những custom elements được cộng đồng cách tân và phát triển sẵn trên https://www.webcomponents.org/.


*
bboomersbar.com
Popular Tags web api web performance angular typescript pwa service worker Angular website worker CLI Schematics npm scripts refresh token clipboard chạy thử copy retryWhen memory memory management garbage collection dom depth npm style chrome dev tools flow tdd paint grunt gulp web component tệp tin database enum macos scale Event loop Concurrency setTimeout javascript mocking unit thử nghiệm dedicated worker .local slow static site generator ipv6 localhost 127.0.0.1 git vyên git lol gitignore global flat-file-cms database-less basic tdd Link tốt khác