Web Component Standards

By in
297
Web Component Standards

Web Component Standards

A new browser feature called Web Components offers a common component model for the Web, which consists of many parts maintained in various locations:

Salesforce Web Standards
Image Source: Lightning Web Components

Shadow DOM

  • Encapsulation, the ability to keep the HTML structure, style, and behavior hidden and distinct from other code on the page so that various parts do not clash, is a crucial component of web components. This allows the code to be maintained neat and tidy. A crucial component of this is the Shadow DOM API, which offers a method of connecting a concealed divided DOM to an element.

Custom Elements

  • The method for allowing the author to define and utilize new types of DOM elements in a document is described in this specification.
  • Authors can create their own fully-featured DOM elements using custom elements. Authors have always had the option to include non-standard elements in their documents with application-specific behavior added later via scripting or a similar method, but historically these elements have been non-conforming and not very useful. Authors can instruct the parser on how to generate an element and how members of that class should respond to changes by defining custom elements.

HTML Templates

  • A template> is an HTML element that enables us to construct, well, a template—the HTML framework for the web component. A template doesn’t have to be a sizable code block.
  • The template> element is significant since it unifies the many components. It serves as the cornerstone upon which everything else is erected, much like a building’s foundation.

ES Modules

  • With the aid of ES Modules, web components may be created in a modular manner that is consistent with other widely used JavaScript implementations. The interface of your unique element can be specified in a JS file, which is subsequently added using the type=”module” property. Client-side ES Module file fusion or package preparation is an option for ES Module files.

Conclusion

In this way, we went through the different web component standards and the usage of those standards in the modern web browsers.

Additional Resources:

Cover Photo by Shannon Potter on Unsplash

Latest posts