Getting Started with Web Components

Injecting Harmony into Your Organization's Component Library: Here's our guide to web components that teaches you how to get started defining your own components.

Translated from Introduction to Web Components and How to Start Using Them by D**id Eastman is a former software professional based in London at Oracle Corpand British Telecom and as a consultant to help teams work more agilely. While open innovation platforms like the web encourage a wide variety of uses, the downside of the confusion is the noise of voices that define what the current network is. Often, at this point in the evolution of technology, industry leaders come together to create rules and regulations that make it easy to reinforce their advantage while also providing greater clarity to consumers. That's why almost anyone can define the important components that make up a car, but may find it harder to do so for **.

Simple things like drawing a circle or putting words in a box can be done in a variety of ways. This is because, for example, a simple shape is not a first-order object of the network. For example, this is a circle defined in CSS:

.circle

Now, this produces a nice circle. While the word "circle" itself doesn't play a role in the definition, it serves as a synthesis of HTML and CSS for the creation of the object I need. If you then ask "What color is it?" That depends a lot on the context of the inheritance and what it contains. I can use playcodeio to confirm if it works. I can also use the appJSX files use the tailwindcss framework in PlayCodeio to draw a circle:

Tailwind is a nice framework. However, next I have to effectively continue to use the library in all other ways. And it's hard to guarantee that these will work well on different browsers. Moreover, like its predecessor, Bootstrap, Tailwind is at the mercy of fate. What we really want is an "official" way to express a component.

Web components are a way to "create an encapsulated, single-responsibility block that can be reused on any page." They consist of pre-existing standards, expressed in the form of web APIs, that have been agreed upon and implemented by various vendors for years. They are now mature and widely used enough to challenge existing popular frameworks. All modern browsers have supported this specification for some time now. Web components allow you to defineCustom elements(e.g. "my-circle") and register them.

That's great, but as I'm suggesting, controlling them requires controlling the CSS everywhere else. To solve this problem, a web component can be set in aShadow DOMcontains its own set of rules. This is just a separate object tree that doesn't conflict with the main DOM.

Finally,Templates and slotsAllows you to define lazy fragments that are not displayed at render time, but can be reused later. So I can define something like this:

my paragraph

Web components are built with j**ascript; Yes, I know some people who want to use less js on their**. But for now, that's the way it is now.

Web components are custom HTML elements such as:。The name must contain a hyphen so that it never conflicts with an element that is officially supported in the HTML specification. So, we've built a relationship: the browser will always be aware of the HTML tag, but will respect the new tag. How do they know about the new label?

After defining a component as a class, you need to register it using CustomElementRegistry as follows:

customelements.define('my-circle', mycircle);

class mycicrle extends htmlelement connectedcallback() // create spans const wrapper = document.createelement("span"); wrapper.setattribute("class", "smallcircle"); // create some css to apply to the shadow dom const style = document.createelement("style"); console.log(style.isconnected); style.textcontent = ` smallcircle `// attach the created elements to the shadow dom shadow.appendchild(style); console.log(style.isconnected); shadow.appendchild(wrapper);

So I just did a lot of work to draw a circle. To prove its component nature, let me do more. I can at least change the color by reading one property :

There is no doubt that the clarity with which custom elements are defined does make using web components on a page a pleasant process. And the change is straightforward enough:

...let clr; if (this.hasattribute("color")) else style.textcontent = ` smallcircle ;

In the same way that I extend the htmlelement, I can also extend the existing html element and go from there.

But are web components coming out too late to obsolete popular frameworks? In most cases, web components can work with framework components, albeit with regardsServer-side renderingA stand-alone issue is indeed a problem (I won't go into it in depth here). The power of web components is really evident when a small UX team wants to develop a library 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 conform to the brand identity can be used like regular labels. Instead of a "my-circle" tag, imagine a "my-company-header" tag that can be used across the organization – the UX team controls the development, but doesn't run the risk of getting stuck in the framework. This brings designers and developers closer. As a result, with web components, an organization's component library is not only more stable, but also less dependent on another layer defined elsewhere, and they use a language that is far beyond the scope of the development team. It brings a bit of harmony to the "Wild West" of the web.