While open innovation platforms like the Web encourage a variety of uses, the cacophony of voices that define what the Web is today has the downside of confusion. Typically, at this point in the evolution of technology, industry leaders work together to create rules and regulations that not only (conveniently) solidify their own advantages, but also make things clearer for consumers. . So while almost anyone can define the critical components that make up a car, this can seem difficult for websites.
Simple tasks like drawing a circle or filling a box can be done in a variety of ways. This is because, for example, simple shapes are not first-class objects on the web. For example, this is a circle defined in CSS.
|
.circle { height: 150 pixels; width: 150 pixels; border: solid 1 pixel; boundary radius: 50%; screen: inline block; } |
This page continues as follows:
This will produce a fine circle. The word “circle” itself does not participate in the definition, but it serves as a composite of HTML and CSS to create the required object. Then, if you ask “What color is that?”, it really depends on the inherited context and what's included. You can use a sandpit like playcode.io to see it working.
You can also use playcode.io with the Tailwind CSS framework and draw the circle with this code. App.jsx File:
|
class=“w-20 h-20 Rounded-full border-2”
border-black flex justify-center Item center> |
The result will be a nice circle like this:
Tailwind is a great framework. But then you should continue to use that library effectively for everything else. And there are very few guarantees about how well these will work across browsers. Additionally, like its predecessor Bootstrap, Tailwind is subject to the whims of fate. What we really want is an “official” way to represent components.
Web component input
Web components are a way to “create encapsulated, single-responsibility blocks of code that can be reused on any page.” These are built on existing standards expressed as Web APIs that vendors have agreed to and implemented over the years. These currently have enough usage and maturity to compete with existing popular frameworks. All modern browsers have supported this specification for some time.
Web components allow you to define: custom elements (Example: “my-circle”) and register.
That's great, but as I hinted, controlling these requires CSS control elsewhere as well. To address this, web components can include their own set of rules. Shadow DOM. This is a separate object tree that does not conflict with the main object tree.
finally, templates and slots You can define inert fragments that are not visible during rendering, but can be reused later. Therefore, it can be defined as:
|
ID=“My paragraph”>
my paragraph
|
It is not rendered, but can later be referenced indirectly and used as a common construct.
Web components are built with JavaScript. Yes, we understand that some people want to reduce the use of JS on their sites. But for now, this is how it works.
How to define your own web components
Web components are custom HTML elements, such as: <my-circle />. The name must include a dash to avoid conflicts with elements officially supported by the HTML specification. So we're already starting with the relationship. Browsers always recognize HTML tags, but will respect new tags. How do they find out about new things?
After defining the component as a class, register it in the CustomElementRegistry like this:
|
custom elements.Define( “My Circle”, my circle ); |
Next, you need to build your component in JavaScript. I know the name of the class because I just registered it. I've put this together by focusing on examples from the documentation.
|
1 2 3 Four Five 6 7 8 9 Ten 11 12 13 14 15 16 17 18 19 20 twenty one twenty two twenty three twenty four twenty five 26 27 28 29 30 31 32 33 34 35 36 |
class my circle extend HTML elements { constructor() { // always call super first in constructor wonderful(); } connected callback() { // create shadow root constant Shadow = this.attach shadow({ mode: “Open” }); // create span constant rapper = document.Creating elements(“span”); rapper.Set attributes(“class”, “Small Circle”); // Create CSS to apply to Shadow DOM constant style = document.Creating elements(“style”); console.log(style.linked); style.text content = ` .small circle { height: 150 pixels; width: 150 pixels; Border: solid 1 pixel; border–radius: 50%; screen: in line–block; color: #hehehehe; } `; // Attach the created element to the shadow dam Shadow.add child(style); console.log(style.linked); Shadow.add child(rapper); } } |
As you can see, I ran this in Playcode without any packages. This is a hand-built JavaScript version of the previous circle example. This proves that web components work even in this sandbox. These two log messages record changes to the Shadow DOM before and after adding the style element.Method connected callback This is part of the lifecycle specification used to make web components work. This method is an inevitable “setup” call when an element is first added to the main document.
So I did a lot of work to draw the circle. Let's do a little more to prove the nature of that component. You can at least change the color by reading the attributes.
There's no doubt that defining custom elements cleanly makes the process of using web components on your pages more pleasant. Modifying the code is very easy.
|
1 2 3 Four Five 6 7 8 9 Ten 11 12 13 14 15 16 17 18 19 20 twenty one |
… Let me Kula; if (this.With attributes(“color”)) { Kula = this.Get attributes(“color”); } other than that { Kula = “White”; } style.text content = ` .small circle { height: 150 pixels; width: 150 pixels; Border: solid 1 pixel; border–radius: 50%; screen: in line–block; color: ${Kula}; } `; … |
Although I haven't used an example using templates, you can use a similar technique to take a template, clone it, and insert it into the shadow DOM. HTML definition made easy in After all, HTML.
extended in the same way HTML elementsyou can also extend existing HTML elements and start from there.
Existing web components
But have web components arrived too late and pushed out popular frameworks? In most cases, web components work next to framework components, but this raises another question. there is. server side rendering This is definitely a fly in the ointment (which I won't go into here).
The strength of web components truly shines when small UX teams want to develop libraries that they know will stand the test of time. Ideas between business and development teams no longer need to be translated into Angular or React. Complex components that match your brand identity can be used just like regular tags. Instead of a “my-circle” tag, consider a “my-company-header” tag that can be used throughout your organization. The UX team manages development, but there's no risk of framework lock-in. This brings designers and builders closer together.
So, using web components not only makes your organization's component library more stable and less dependent on separate layers defined elsewhere, but also makes the language you use more descriptive across your development team. It will be easier. Bringing a little bit of harmony to the wild west of the web.
YouTube.COM/THENEWSTACK
Technology moves fast, so don't miss an episode. Stream all our podcasts, interviews, demos, and more by subscribing to our YouTube channel.
subscribe
