A web component is a combination of HTML, CSS and JS in a single and isolated element, isolating code with specific purpose can be benefitial to the overall UI building since a web component can be 'repeated' multiple times, reused, similar to a function in a programming language, whose purpose is to reduce or remove repetition, and by being isolated, to behave predictably in a standard manner at every instance. TLDR - write a component once, change it once and have it everywhere, without side-effects/bugs.
The purpose of this article-like tutorial is to show some ways of developing UI components, mainly to provide a way to fellow neocities users to make less HTML/CSS and reuse more code, as i too wished for it when i started developing my own site.
This page and other pages in this site are using multiple web components, such as the main-title, sidenavs, footer, changelog, accordions and many more! then let's not lose time and see our options to create a component; the model component will be the "main-title".
<body>
<main-title></main-title>
<script>
class MainTitle extends HTMLElement {
constructor() { super() }
connectedCallback() {
// Create component elements.
const
container = document.createElement("div"),
title = document.createElement("p"),
subtitle = document.createElement("p");
// Create elements text.
title.append(document.createTextNode("Title here!"));
subtitle.append(document.createTextNode("Subtitle here!"));
// Append elements to DOM.
container.append(title);
container.append(subtitle);
this.append(container);
}
}
window.customElements.define("main-title", MainTitle);
</script>
</body>
When libraries like react or frameworks like Angular became popular, web components spec wasn't fully standardized, sum that with the fact that handling a web component the "default way" is by using the native browser APIs, wich can become a nightmare to maintain, for its verbosity and hard to read programatic way of building (as opposed to having a HTML with JS injected) therefore not many developers adopted native web components and the few content shared about it is usually people talking how bad they are; for relevant and explanative info about native web components i recommend this very cool video. Another option to make a native web component less unbearable to develop is to set its content by appending to innnerHTML, this is not performatic, but if there's not much content, try it out; just be careful when there is user inputed data at the middle, because XSS attacks can happen as a subproduct.
<body>
<div>
<p>My cool site content</p>
<script>
document.write("<div>");
document.write("<p>Title !</p>");
document.write("<p>Subtitle !</p>");
document.write("</div>");
</script>
<footer>My cool footer</footer>
</div>
</body>
Altough document.write is deprecated, this is a straightforward way of injecting HTML with JS as a component would. Fellow neocitites website Ikewise Online has a very good tutorial on it; (unfortunately it's owner is not updating the site anymore, that's sad. This was one of the first neocities sites i surfed upon).