WEB COMPONENTS LÀ GÌ

  -  

Web component là tập vừa lòng các Web APIs có thể chấp nhận được bọn họ tạo thành một thẻ HTML riêng, mang những tính năng riêng biệt, gói gọn, rất có thể tái áp dụng. Web component được desgin bên trên chuẩn website hiện tại, vì vậy vẫn (với sẽ) có thể hoạt động bên trên tất cả các trình để mắt, hoàn toàn có thể tương xứng với toàn bộ các library và framework Javascript có thể thao tác với HTML.

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

Web component là gì?

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

Các Điểm sáng cấu thành web component.

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

*

Custom elements

Là một tập vừa lòng các Javascript APIs có thể chấp nhận được họ tạo thành element riêng cùng với những đặc thù và hành động riêng biệt để hoàn toàn có thể sử dụng nhỏng các element khoác định ngoại trừ UI.Xem cụ thể tại https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

Shadow DOM

Cũng là 1 tập vừa lòng những Javascript APIs giúp bọn chúng ta:

tạo thành, đi kèm cùng gói gọn một cây DOM vào trong 1 custom element - cây DOM này render tự do cùng với cây DOM chính (window.document)điều khiển và tinh chỉnh các công dụng tương quan gói gọn các anh tài và styling của cây DOM, tránh xung đột ra những 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à , giúp chúng ta tạo thành HTML template mà lại câu chữ bên 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ới áp dụ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 bọn họ đề nghị tạo ra một class hoặc function nhằm định nghĩa các tính nă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 làm CustomElementRegistry.define(). Method này nhấn vào 3 params, trước tiên là tên gọi element,thứ 2 là class hoặc function kể trên, trang bị 3 (optional) là element ao ước thừa kế.

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

Xem thêm: Download Diablo 2 Việt Hoá, Download Diablo 2 Việt Hóa Full Complete Edition

Nếu áp dụng cho shadow DOM thì hoàn toàn có thể sử dụng method Element.attachShadow() vào nội tại 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 trong nlỗi thao tác cùng với DOM thường thì.

// 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");inhỏ.setAttribute("tabindex", 0);var info = document.createElement("span");info.setAttribute("class","info");// Take attribute content & 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;inhỏ.appendChild(img);// Create some CSS to lớn apply khổng lồ 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 thực hiện mang đến custom template ( & ), trước tiên tạo ra element nhỏng thông thường với tên template hoặc slot (có thể chế tác bên trên file HTML hoặc sản xuất = JS), tiếp nối clone với attach vào shadow DOM.lấy một ví dụ chúng ta có mang ra template trong 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 với React đang cung cấp áp dụng Web component. Trong Angular, bạn có thể sử dụng thông qua package
angular/elements (https://angular.io/guide/elements), vào 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 sử dụng cùng với các framework js nổi tiếng như Angular, React, ... vày bọn chúng đều sở hữu hệ thống làm chủ component riêng, tuy nhiên sẽ sở hữu chân thành và ý nghĩa lớn trong câu hỏi góp những framework gồm tiếng nói phổ biến vào vấn đề tái áp dụng component xuyên suốt nền tảng gốc rễ với áp dụng component mặt đồ vật 3.

Xem thêm: Cài Và Chơi Game Plants Vs

Bên cạnh đó những chúng ta có thể test cần sử dụng một số custom elements được xã hội phát triển sẵn trên https://www.webcomponents.org/.


*
dnppower.com.vn
Popular Tags website api web 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 kiểm tra 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 giỏi không giống