Hello, I would like to make a custom tag in astro like <AntiRegex> where whatever I put in the tags is split into a span for each character at build time, for example, "<AntiRegex>hello</AntiRegex> would become <span>h</span> <span>e</span> <span>l</span> <span>l</span> <span>o</span> at build time. However, I can't find anything that would let me do this in .astro files, do I have to use a framework like react?
#help
daring cedar
wispy masonBOT
Hi @daring cedar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
You can achieve this functionality using Astro's built-in capabilities without needing to use a framework like React. You can create a custom component in Astro and use JavaScript to split the content into individual characters and wrap each character in a <span> tag.
Here's an example of how you can do this:
---
// Define the behaviour for our new type of HTML element.
class AntiRegex extends HTMLElement {
constructor() {
super();
const content = this.textContent;
this.innerHTML = '';
for (const char of content) {
const span = document.createElement('span');
span.textContent = char;
this.appendChild(span);
}
}
}
// Tell the browser to use our AntiRegex class for <anti-regex> elements.
customElements.define('anti-regex', AntiRegex);
---
<!-- Wrap the component elements in our custom element “anti-regex”. -->
<anti-regex>
hello
</anti-regex>
In this example, we define a new <anti-regex> HTML element that splits the content into individual characters and wraps each character in a <span> tag. This is done in the constructor of the AntiRegex class, which is associated with the <anti-regex> element using customElements.define.
Please note that this code should be placed in a .astro file and the <anti-regex> tag can be used in the same file or any other .astro file in your project.