Web components là gì

Twitch icon Watch on Twitch Slachồng ibé Join us on Slack Twitter inhỏ Follow us on Twitter English Italiano 中文


JavaScript frameworks & libraries, we can all agree there are a lot of them. Angular, React, Vue, Svelte—the list seems to grow every year. But, what vị they all have in common? The answer is that they are used to build applications on the web, và they provide the ability lớn create reusable components.

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

What if you could create components based on existing website standards, components that vị not depkết thúc on the framework or library used to glue everything together into an application? That is where Web Components come in.

Who is Using Web Components?

Here are a few companies you may have heard of that implement Web Components:


Google: many properties including the AMP.. web component framework (source)

Salesforce: Lightning Web Components (source)

Twitter: Embedded Tweets (source)

GitHub: The “Updated ago” (source)

YouTube: The site is built using Web Components (source)

Case Study

Let’s dive deeper into how Electronic Arts (EA) uses Web Components. (source)

EA is one of the largest game companies with over 22 studquả táo & 10,000 people in 30 locations all over the world. Needless khổng lồ say, they release a lot of games (NBA Live sầu, Star Wars, The Sims, Battlefield, etc).

In the beginning, the web team took the approach of designing và developing each game’s trang web independently, one site at a time. As you can imagine, this leads to a laông chồng of a coherent experience for users browsing all the games EA offers. It was also difficult for the designers & developers working on the sites. They were spending 80% of their time on “Commodity Web”, (i.e. navigation, footers, và media galleries) instead of building custom experiences for each game title.

To invert that ratio, The Network Design System (NDS) was created. With the NDS, they were able khổng lồ take the Commodity Web components và add:

Theming capabilitiesAbility to lớn integrate with any language và frameworkSupport for their Micro-site ArchitectureDelivery as a User Interface as a Service (UIaaS)

And you know who else has most likely used Web Components?

You. Have sầu you ever wondered how is it possible that you can just set the ‘src’ attribute on a or & have a fully functional player with buttons, volume control, progress bar, timer, và other options? Web Components.

Sorry, your browser doesn"t tư vấn embedded videos, but don"t worry, you can tải về it và watch it with your favorite đoạn Clip player!source

Your browser does not support the audio element. source

An Example

Let’s look at an example that’s just as easy to lớn use, but has a lot more happening behind the scenes—the model-viewer Web Component developed by Google.

Here is the code needed to display a 3D model:

google/model-viewer/dist/model-viewer-legacy.js/a>!-- Use it lượt thích any other HTML element -->model-viewer src="https://hufa.edu.vn/shared-assets/models/Astronaut.glb" alt="A 3D Mã Sản Phẩm of an astronaut" auto-rotate camera-controls>/model-viewer>
With a simple HTML tag, you can embed a 3D mã sản phẩm without needing khổng lồ know WebGL và the WebXR Device API.

Here is the model-viewer Web Component implemented within và without a framework / library:

Vanilla JavaScript



What Makes Up a Web Component

Hopefully seeing who is using và what can be created with Web Components now has you wanting to know how khổng lồ create your own.

As stated before, Web Components are built on Web Standards. These low-màn chơi APIs consist of:

Custom ElementsShadow DOMHTML Templates

Custom Elements API: Allows you lớn register a custom element on the page.

Xem thêm: Họ Lê Đặt Tên Gì Hay - Đặt Tên Con Họ Lê, Tên Đẹp Cho Bé Gái, Bé Trai

Must include a hyphen/dash (kebab-case) i.e. my-custom-element. No single word elements khổng lồ prsự kiện name clashes.It’s a class object that defines its behavior.Also determines which, if any, built-in elements the custom elements extends i.e. input (HTMLInputElement), button (HTMLButtonElement), etc.

Shadow DOM API: Facilitates a method khổng lồ attach a separate DOM to an element

Allows for the remapping of events i.e. turn a cliông xã sự kiện into something more meaningful.

HTML Templates API: Creates a flexible template that will be inserted inlớn the custom elements shadow DOM.

the element’s nội dung is not immediately rendered. We define the HTML structure upfront and clone when needed via JavaScript.Used to efficiently render HTML và update it when the user interacts with our website component.For more complex templates, it may be easier khổng lồ use a library, framework, or tool.

Basic Example

Here’s an example Web Component I wrote with comments to help explain what is going on.

Browser Support

If you"re wondering about browser tư vấn, Web Components are supported in modern browsers.


For older browsers, you can use polyfills: https://www.webcomponents.org/polyfills

At hufa.edu.vn, we are creating Web Components lớn build a Design System lượt thích Electronic Arts mentioned earlier. Our goal is for users lớn be able lớn easily assemble components lớn build things lượt thích chat applications without having to lớn worry about what is happening behind the scenes.

Xem thêm: Sản Phẩm “ Niche Product Là Gì ? Ý Nghĩa Của Market Niche Trong Tiếng Anh

Here are some resources for more information on Web Components:

What’s Next?

The Web Component example I made was a simple one. As the complexity of a component grows, using a tool may make development easier. In the next blog post, we’ll be comparing different frameworks & tools that create Web Components.