What do you know about Web Components?

What do you know about Web Components?
Average rating: 5
(1 votes)

Thanks! You’ve rated this material!

Web components are getting more and more involvement in the process of frontend development. This is made evident by hundreds of articles, tutorials, and threads with discussions. Our blog isn’t an exception. Let’s check, what do you know about Web Components?

Web Components consist of three separate technologies (some people also add ES Modules) that are used together:

  1. Custom Elements. Quite simply, these are fully-valid HTML elements with custom templates, behaviors and tag names (e.g. <one-dialog>) made with a set of JavaScript APIs. Custom Elements are defined in the HTML Living Standard specification.
  2. Shadow DOM. Capable of isolating CSS and JavaScript, almost like an <iframe>. This is defined in the Living Standard DOM specification.
  3. HTML templates. User-defined templates in HTML that aren’t rendered until called upon. The <template> tag is defined in the HTML Living Standard specification.

Custom elements are HTML elements, like <div><section> or <article>. Custom elements are just like standard HTML elements — names in angle brackets — except they always have a dash in them, like <news-slider> or <bacon-cheeseburger>.

The shadow DOM is a version of the DOM. This allows authors to effectively isolate DOM fragments from one another, including anything that could be used as a CSS selector and the styles associated with them.

The aptly-named HTML <template> element allows us to stamp out re-usable templates of code inside a normal HTML flow that won’t be immediately rendered but can be used later.

For more details check the original material by Caleb Williams.

And we recommend you to read ‘Web components from zero to hero‘ on dev.to. We are sure you can find something useful there.

And if you’re looking for experienced team to develop anything you need on the web, don’t hesitate to contact Syndicode! Dedicated engineers at your service!

Rate this article, if you like it

Thanks! You’ve rated this material!

Got a project? Let's discuss it!

*By submitting this form you agree with our Privacy Policy.

Mailing & Legal Address

Syndicode Inc. 340 S Lemon Ave #3299, Walnut CA, 91789, USA

Visiting & Headquarters address
Kyiv Sofiivska 1/2a, 01001, Kyiv, Ukraine
Dnipro Hlinky 2, of. 1003, 49000, Dnipro, Ukraine
Email info@syndicode.com
Phone (+1) 9035021111