WEB COMPONENT LÀ GÌ

  -  

Web component là tập hợp những Web APIs cho phép họ tạo nên một thẻ HTML riêng rẽ, sở hữu những tính năng riêng biệt, đóng gói, có thể tái áp dụng. Web component được phát hành trên chuẩn chỉnh website hiện nay, chính vì như vậy sẽ (và sẽ) có thể hoạt động trên tất cả những trình phê duyệt, hoàn toàn có thể tương thích với tất cả các library cùng framework Javascript rất có thể làm việc cùng với HTML.

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

Quý Khách vẫn xem: Web component là gì

Web component là gì?

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

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

Web component dựa vào 3 yếu tố chính:


*

Custom elements

Là một tập thích hợp những Javascript APIs có thể chấp nhận được bọn họ tạo ra element riêng cùng với các đặc thù và hành vi riêng để có thể cần sử dụng nhỏng các element khoác định ngoại trừ UI.Xem cụ thể trên 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òa hợp các Javascript APIs giúp chúng ta:

tạo thành, đi kèm với gói gọn một cây DOM vào một trong những custom element - cây DOM này render độc lập cùng với cây DOM chủ yếu (window.document)tinh chỉnh và điều khiển những công dụng tương quan gói gọn các kỹ năng với styling của cây DOM, rời xung bỗng nhiên ra những DOM elements mặt 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ẻ cùng , góp bọn họ tạo ra HTML template mà lại văn bản bên trong 2 thẻ này sẽ ko được render trực tiếp ra bên phía ngoài mà lại chỉ có thể attach với áp dụng cùng với shadow DOM.Xem cụ thể 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. Trước hết chúng ta phải tạo ra một class hoặc function nhằm tư tưởng những tác dụng của custom element

class PopUpInfo extends HTMLElement constructor() // Always Call super first in constructor super(); // write element functionality in here ... 2. Đăng kí custom element bằng cách tiến hành CustomElementRegistry.define(). Method này nhận vào 3 params, đầu tiên là tên element,thứ 2 là class hoặc function nhắc bên trên, trang bị 3 (optional) là element hy vọng thừa kế.

Xem thêm: Freedos Là Gì - Xin Giúp E Về Hệ Điều Hành Free Dos Là Gì

// Create a shadow rootvar shadow = this.attachShadow(mode: "open");// Create spansvar wrapper = document.createElement("span");wrapper.setAttribute("class","wrapper");var ibé = document.createElement("span");inhỏ.setAttribute("class","icon");inhỏ.setAttribute("tabindex", 0);var info = document.createElement("span");info.setAttribute("class","info");// Take attribute nội dung 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;ibé.appendChild(img);// Create some CSS to apply lớn the shadow domvar style = document.createElement("style");style.textContent = ".wrapper {" +// CSS truncated for brevity// attach the created elements khổng lồ the shadow domshadow.appendChild(style);shadow.appendChild(wrapper);wrapper.appendChild(icon);wrapper.appendChild(info);4. Nếu sử dụng cho custom template ( and ), trước tiên tạo thành element nhỏng thông thường cùng với tên template hoặc slot (rất có thể tạo ra trên tệp tin HTML hoặc tạo nên = JS), tiếp đến clone và attach vào shadow DOM.ví dụ như bọn họ tư tưởng ra template trong tệp tin HTML:

My paragraph

Tiếp theo 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ỏng một thẻ HTML bình thường.

Tính tương thích


*

Tính ứng dụng

Lúc Này Angular cùng React đang cung cấp áp dụng Web component. Trong Angular, bạn cũng có thể thực hiện trải qua package angular/elements (https://angular.io/guide/elements), vào react thì straight forward rộng (https://reactjs.org/docs/web-components.html).

Xem thêm: " Cashew Là Gì Và 7 Lợi Ích Của Nó Bằng Tiếng Anh, Cashew Là Gì, Nghĩa Của Từ Cashew

Bên cạnh đó những bạn cũng có thể thử cần sử dụng một trong những custom elements được cộng đồng cải tiến và phát triển sẵn tại https://www.webcomponents.org/.


*

dnppower.com.vn Popular Tags website api website performance angular typescript pwa service worker Angular website 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 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 ổn git lol gitignore global flat-file-cms database-less basic tdd Link xuất xắc không giống Chuyên mục: Tài liệu