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:
- Custom Elements. Quite simply, these are fully-valid HTML elements with custom templates, behaviors and tag names (e.g.
<iframe>. This is defined in the Living Standard DOM specification.
- 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
<article>. Custom elements are just like standard HTML elements — names in angle brackets — except they always have a dash in them, like
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!