tags:
- webcomponent
- concept
alias:
date: "2022-10-13 @ 11:21"
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
As developers, we all know that reusing code as much as possible is a good idea. This has traditionally not been so easy for custom markup structures — think of the complex HTML (and associated style and script) you've sometimes had to write to render custom UI controls, and how using them multiple times can turn your page into a mess if you are not careful.
Web Components aims to solve such problems — it consists of three main technologies, which can be used together to create versatile custom elements with encapsulated functionality that can be reused wherever you like without fear of code collisions.
<template>
and <slot>
elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure.The basic approach for implementing a web component generally looks something like this:
CustomElementRegistry.define()
method, passing it the element name to be defined, the class or function in which its functionality is specified, and optionally, what element it inherits from.Element.attachShadow()
method. Add child elements, event listeners, etc., to the shadow DOM using regular DOM methods.<template>
and <slot>
. Again use regular DOM methods to clone the template and attach it to your shadow DOM.