WEB COMPONENT LÀ GÌ

     

Web component là tập hợp các Web APIs mang đến phép bọn họ tạo ra một thẻ HTML riêng, mang các đặc tính riêng, đóng góp gói, có thể tái sử dụng. Website component được gây ra trên chuẩn chỉnh web hiện tại, chính vì thế đang (và sẽ) bao gồm thể chuyển động trên toàn bộ các trình duyệt, có thể tương ưa thích với tất cả các library và framework Javascript rất có thể làm việc với HTML.

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

Web component là gì?

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

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

Web component dựa trên 3 nguyên tố chính:

*

Custom elements

Là một tập hợp những Javascript APIs mang lại phép bọn họ tạo ra element riêng với các đặc thù và hành vi riêng để có thể dùng như những element khoác định quanh đó UI.Xem cụ thể tại https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

Shadow DOM

Cũng là một trong những tập hợp những Javascript APIs giúp bọn chúng ta:

tạo, lắp kèm và đóng gói một cây DOM vào trong 1 custom element - cây DOM này render tự do với cây DOM chủ yếu (window.document)điều khiển các tác dụng liên quan đóng góp gói những tính năng và styling của cây DOM, kiêng xung đột ra những DOM elements bên ngoài

*

Xem chi tiết tại https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

HTML templates:

Gồm 2 thẻ và , giúp chúng ta tạo ra HTML template cơ mà nội dung phía bên trong 2 thẻ này vẫn ko đc render thẳng ra bên phía ngoài mà chỉ hoàn toàn có thể attach và áp dụng với shadow DOM.Xem chi tiết tại https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots

Cách khiến cho một custom element nói chung

1. Đầu tiên chúng ta cần tạo nên một class hoặc function để khái niệm các tính năng của custom element

class PopUpInfo extends HTMLElement constructor() // Always hotline super first in constructor super(); // write element functionality in here ... 2. Đăng kí custom element bằng phương thức CustomElementRegistry.define(). Method này dìm vào 3 params, đầu tiên là tên element,thứ 2 là class hoặc function nói trên, vật dụng 3 (optional) là element ước ao kế thừa.

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

Xem thêm: Sự Kiện 28 Tháng 2 Là Ngày Gì ? Ý Nghĩa Ngày 28 Tháng 2 Năm 2022

Nếu sử dụng đến shadow DOM thì hoàn toàn có thể sử dụng 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 họ manipulate shadow DOM bên trong như thao tá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 icon = document.createElement("span");icon.setAttribute("class","icon");icon.setAttribute("tabindex", 0);var info = document.createElement("span");info.setAttribute("class","info");// Take attribute nội dung and 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/default.png";var img = document.createElement("img");img.src = imgUrl;icon.appendChild(img);// Create some CSS to lớn apply to the shadow domvar style = document.createElement("style");style.textContent = ".wrapper {" +// CSS truncated for brevity// attach the created elements lớn the shadow domshadow.appendChild(style);shadow.appendChild(wrapper);wrapper.appendChild(icon);wrapper.appendChild(info);4. Nếu sử dụng đến custom template ( và ), trước tiên tạo ra element như thông thường với tên template hoặc slot (có thể sản xuất trên tệp tin HTML hoặc tạo nên = JS), sau đó clone và attach vào shadow DOM.Ví dụ họ định nghĩa ra template trong file HTML:

My paragraph

Tiếp theo chúng ta 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. ở đầu cuối sử dụng custom element như một thẻ HTML bình thường.

Tính tương thích

*

Tính ứng dụng

Hiện tại Angular với React đã cung cấp sử dụng web component. Trong Angular, chúng ta có thể sử dụng trải qua package
angular/elements (https://angular.io/guide/elements), trong react thì straight forward hơn (https://reactjs.org/docs/web-components.html).

Việc ứng dụng Web component ko có ý nghĩa sâu sắc nhiều khi thực hiện với số đông framework js lừng danh như Angular, React, ... Bởi vì chúng đều có hệ thống cai quản component riêng, mặc dù sẽ có ý nghĩa sâu sắc lớn trong câu hỏi giúp những framework bao gồm tiếng nói bình thường trong vấn đề tái áp dụng component xuyên suốt nền tảng và áp dụng component bên thứ 3.

Xem thêm: Từ Cu Là Gì - Cu Có Nghĩa Là Gì

Ngoài ra các bạn cũng có thể thử dùng một trong những custom elements được xã hội phát triển sẵn tại https://www.webcomponents.org/.


*
vantaidongphat.com
Popular Tags web api web performance angular typescript pwa service worker Angular web worker CLI Schematics npm scripts refresh token clipboard demo copy retryWhen memory memory management garbage collection dom depth npm style chrome dev tools flow tdd paint grunt gulp website component file database enum macos scale sự kiện loop Concurrency setTimeout javascript mocking unit test dedicated worker .local slow static site generator ipv6 localhost 127.0.0.1 git vim git lol gitignore global flat-file-cms database-less basic tdd liên kết hay khác