Web components là gì

Twitch icon Watch on Twitch Slack icon Join us on Slack Twitter icon Follow us on Twitter English Italiano 中文


JavaScript frameworks và libraries, we can all agree there are a lot of them. Angular, React, Vue, Svelte—the các mục seems khổng lồ grow every year. But, what vì chưng they all have in common? The answer is that they are used to lớn build applications on the web, and they provide the ability to lớn create reusable components.Bạn vẫn xem: web components là gì

What if you could create components based on existing website standards, components that do not depend on the framework or library used lớn glue everything together into an application? That is where web Components come in.

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

Who is Using website Components?

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


Google: many properties including the AMP website 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 trò chơi companies with over 22 studios and 10,000 people in 30 locations all over the world. Needless lớn say, they release a lot of games (NBA Live, Star Wars, The Sims, Battlefield, etc).

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

To invert that ratio, The Network kiến thiết System (NDS) was created. With the NDS, they were able to lớn take the Commodity web components and add:

Theming capabilitiesAbility 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 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, & other options? web Components.

Sorry, your browser doesn"t support embedded videos, but don"t worry, you can download it & watch it with your favorite đoạn clip player!source

Your browser does not tư vấn the audio element. Source

An Example

Let’s look at an example that’s just as easy khổng lồ use, but has a lot more happening behind the scenes—the model-viewer website Component developed by Google.

Here is the code needed khổng lồ display a 3 chiều model:

google/model-viewer/dist/model-viewer-legacy.js/a>!-- Use it lượt thích any other HTML element -->model-viewer src="https://shirohada.com.vn/shared-assets/models/Astronaut.glb" alt="A 3D model 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 to lớn know WebGL & the WebXR Device API.

Here is the model-viewer web Component implemented within & without a framework / library:

Vanilla JavaScript



What Makes Up a website Component

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

As stated before, website Components are built on website Standards. These low-level APIs consist of:

Custom ElementsShadow DOMHTML TemplatesMust include a hyphen/dash (kebab-case) i.e. My-custom-element. No single word elements lớn prevent 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. đầu vào (HTMLInputElement), button (HTMLButtonElement), etc.

Xem thêm: Cách Sử Dụng Đồ Chơi Người Lớn, Hướng Dẫn Cách Sử Dụng Đồ Chơi Tình Dục Từ A

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

Allows for the remapping of events i.e. Turn a click sự kiện into something more meaningful.

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

the element’s content is not immediately rendered. We define the HTML structure upfront & clone when needed via JavaScript.Used to lớn efficiently render HTML và update it when the user interacts with our web component.For more complex templates, it may be easier to use a library, framework, or tool.

Basic Example

Here’s an example web Component I wrote with comments khổng lồ help explain what is going on.

Browser Support

If you"re wondering about browser support, website Components are supported in modern browsers.

Xem thêm: Những Nơi Đáng Sợ Nhất Thế Giới, Đừng Nên Du Lịch Nếu Bạn Yếu Tim


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

Here are some resources for more information on website Components:

What’s Next?

The website 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 and tools that create web Components.