TL;DR: A Web Component is an element you put on your webpages. It can be completely isolated from the rest of the webpages' codes. Therefore it's a good tool for third party integrations. Use our "web component to display code” if you can’t show the code in any different way.
What Web Components are
Let’s first have a look at a regular HTML component, with the code (<code></code>) component as an example. These "regular" HTML components are called tags. As soon as you put these on to your webpages they become visible and browsers display them accordingly to their stylesheet instructions (CSS).
Every webpage contains of various different and multiple tags like that. All together they build a tree of items, called the DOM (Document Object Model). Normally a webpage consists of only one of those DOMs. With Web Components this can be different.
First Web Components need to be registered to browsers by using the CustomElementRegistry. You may give them a name as long as the name isn't reserved for any other component or HTML tag.
All of that is done in JavaScript. There are libraries which help registering and creating Web Components, so you don't have to know and write all that vanilla JavaScript code.
Afterwards it's time to fill your Web Component with life. Use JavaScript to define what your component does and add some stylesheets instructions to define how you want it to look. Web Components are able to load external web files, like CSS or other JavaScript files themselves.
The Shadow DOM
No, that's not the title of the latest Steven King book.
Every webpage is made out of a variety of tags and components. They all form the DOM (Document Object Model), as mentioned earlier.
By default Web Components have the same behaviour as any other HTML tag that you'd add to your webpage: they are influenced by other elements and stylesheet instructions on the same webpage. This might restrict your Web Component or even damage it.
The solution for this is to attach the Web Component to it's own DOM, the Shadow DOM. This would isolate your Web Component from the rest of the page.
The issue we fixed with a Web Component
This level of encapsulation or isolation, a Web Component can have from the other elements on a webpage, is one of its best features.
The problem we faced was that our website builder Rocketspark removes all whitespace (like spaces and tabs) from the webpages' code prior to giving it to browsers to display it. This makes code snippets, that are meant for users to see, barely readable.
The "web component to display code" to the rescue
Given the distinct features a Web Component has (that we have been talking about in this post) we were able to circumvent the above issue by writing a Web Component to display code.
This Web Component takes a given code snippet, independent of its appearance (whitespace or not), checks its validity and displays it formatted back to the user.
It is used in the following way:
<tn-code-display data-language="javascript">
<textarea>
const variable = "variable";
const print = function () {
console.log(variable);
}
</textarea>
</tn-code-display>
and will then display:
Our web component to display code is available for everybody to use on GitHub.
We'd also be happy for any contributions, as it is open for adding such.
Please find the detailed instructions on how to use it on your websites on the first GitHub page. More examples you can see here.
We hope this blog post gave you a basic understanding of what Web Components are and what issues they ought to fix.
Thank you very much for reading and see you next time.
