Web components là gì

     

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

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

Bạn vẫn xem: web components là gì

Web component là gì?

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

Các điểm lưu ý cấu thành website component.

Web component dựa trên 3 thành phần 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 rẽ với các đặc điểm và hành động riêng để hoàn toàn có thể dùng như các element khoác định không tính 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 tập hợp các Javascript APIs giúp bọn chúng ta:

tạo, gắn thêm kèm 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 hòa bình với cây DOM chính (window.document)điều khiển các tính năng liên quan đóng góp gói những tính năng với styling của cây DOM, kiêng xung đột ra những DOM elements mặt 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ẻ cùng , giúp họ tạo ra HTML template mà nội dung bên phía trong 2 thẻ này đã ko đc render thẳng ra bên phía ngoài mà chỉ rất có thể attach và thực hiện 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 tạo cho một custom element nói chung

1. Đầu tiên họ cần tạo thành một class hoặc function để quan niệm các chức 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 phương thức CustomElementRegistry.define(). Method này nhận vào 3 params, trước tiên là thương hiệu element,thứ 2 là class hoặc function kể trên, lắp thêm 3 (optional) là element mong muốn kế thừa.

Xem thêm: Rạch Giá Kiên Giang Có Gì Chơi, Rạch Giá Có Gì Chơi

// 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 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 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 ( & ), trước tiên tạo nên element như thông thường với tên template hoặc slot (có thể tạo trên tệp tin HTML hoặc chế tạo = JS), tiếp đến clone và attach vào shadow DOM.Ví dụ bọn họ định nghĩa ra template trong tệp tin 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. ở đầu cuối sử dụng custom element như 1 thẻ HTML bình thường.

Tính tương thích


*

Tính ứng dụng

Hiện trên Angular cùng React đã hỗ trợ sử dụng website component. Vào Angular, chúng ta cũng có thể sử dụng trải qua package angular/elements (https://angular.io/guide/elements), trong react thì straight forward rộng (https://reactjs.org/docs/web-components.html).

Xem thêm: " Ksi Là Gì ? Pound Trên Inch Vuông

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


*

tambour.vn Popular Tags web api web performance angular typescript pwa service worker Angular web worker CLI Schematics npm scripts refresh token clipboard test 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 vim git lol gitignore global flat-file-cms database-less basic tdd liên kết hay không giống