Component structured web pages are nothing new in 2021, yet you can still find tons of websites and content management systems not taking advantage of all their benefits. Today, I will be going over why large companies should start using web components to build their sites, and the major benefits they provide.
Shadow DOM
Web components use the Shadow DOM to separate the document model for component from the rest of the DOM it is in. It works similarly to a video element or iframe where the element's attributes and CSS can't be changed by the rest of the page, and likewise, it's own attributes can't change the rest of the page. This is useful for large companies as they have thousands of developers who are all creating their own pages and components. If you want to interchangeably use components on a page, you won't need to worry about messing up the styling of the rest of the page.
Ease of Use
Although there are some new standards and practices to learn, once you're up and running, you can simply add or create new custom elements to your page with ease. Once a custom element has been published, you can add it into the top of your HTML page with a script tag using the module attribute. This means you don't have to worry about anything going on under the hood, and you don't need a build sequence to use the element. You can simply add it and start running with it. This is especially huge for large companies, as anyone can publish a custom element like a standard logo for their company and then everyone who needs to use the logo on a page just adds the custom HTML to their page after initializing the module.
Custom Elements don't rely on huge projects
This is a fairly straightforward point, but it seems like most people don't take into account how big of a deal this can be. Many web development frameworks and projects can have version breaking changes that sometimes require completely rewriting your system. On top of this you usually need other tooling to help keep your component versions consistent across large sites. With custom elements, you're creating everything with mostly vanilla JS, and you're not going to rely on companies that create frameworks like React or Angular. This is important for large companies who have many developers making different sites, as a single change won't break everything. You can also use different methods for making sure all of your custom elements are running the correct versions.
As you can see, there's some major benefits to using web components. It's important that these standards continue to be adopted by smaller players in the web development community, so that we can continue to build a future web where components are easily shared and work for free.
Video Demo
Top comments (0)