How to Create a Website Using a Single Tag

Future of web apps powered by Web Components

Photo by Viva Luna Studios on Unsplash

Yes, I know it sounds too good to be true, and if you think this is about YAFS or libraries, no this is purely using Standard (it’s highlighted for a reason, read the whole article) HTML and JavaScript.

If you don’t believe me check out my pen:

And use developer tools to inspect the page and check the DOM Tree.

So, now you may be wondering like a kid how to decode this magic trick. I’m going to be listing out all the possibilities of how it can be done.

Take a minute to think (🤔) about it, if your mind thinks of terms like Framework, components, W3C proposals, custom elements, then you have figured out the magic trick. Yes, it's done using Web Components (if you’re wondering what crazy shit is this).

Web Components

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML. (source: https://www.webcomponents.org/introduction)

The concept is one of encapsulating a functionality design to render custom UI across multiple times. These laid foundations for the evolution of frameworks (Angular, React, Vuejs, etc) and their popular child components, but right now they are available across all popular browsers using HTML without any dependency on third-party libraries.

https://www.webcomponents.org/

Before we dive into how to create your own Web component, understand these three topics

• Custom Element: JavaScript API to define custom elements and their behavior.
• Shadow DOM: Scoping your style, isolating from main document DOM
• HTML Templates: Reusable HTML templates, which can be used while creating Custom Elements.

I’m not going to explain deeply about this topic (not in this post. checkout MDN )

Let's breakdown my code https://codepen.io/amerr/pen/qBZVNZr based on the above three concepts

• My class ContactAmerr will be used to define the behavior of my custom element
• this.attachShadow({mode: 'open'}) Attaching my custom element to shadowDOM and open option to access the shadowDOM using element.shadowRoot
• The rest of the code is using a template from DOM and replacing the text content with values from the Custom Element attributes. You can imagine this similar to the way how data sent via props to Framework components and those values to render in the component template.
• The last step is to register your Custom Element using CustomElementRegistry define method, which is available via window.customElements . Define method requires the name of the custom element (make sure the name is hyphenated )

After following the above steps 🪄 Eureka, you have created your own Web components.

Now You can use the component, anywhere in the documents

<contact-amerr data-first-name="Elon" data-last-name="Musk" />

NOTE: Ignore the CSS & HTML in template code if it is too confusing for you, this is just an attempt to make this demo interesting. In most cases, web components are simple , if it gets complex split into multiple web components.

I hope this article gave you insights into Web Components. I would also recommend you to check out this video

Web components powering the web

and these frameworks

Stencil

Svelte

Thank you. If I have made a mistake, please comment. I will be happy to correct it.

More content at plainenglish.io