Search code examples
javascriptpythonhtmlhtml-parsing

New tag and parser in HTML

I've sketched out a new programming language for client side scripting. I'm familiar with how to build a language, and most of the work that goes into it. I'm prepared for a long project but have a few questions about how to implement it into a HTML file. I'd like to implement something like the <script> tag in HTML, and I've found a few links that explain how to add a new tag to HTML. I figure developers will have to connect to a js file with the language parser (it's actually more than a parser, but that's besides the point) in the head of their HTML file, like so: <script src="my-lang.js"></script>. Here are some of the links I've found: https://blog.teamtreehouse.com/create-custom-html-elements-2 https://developers.google.com/web/fundamentals/web-components/customelements

Here are some of my questions, assuming I want my language between <my-language> tags:

  1. How do I prevent the browser's HTML parser from misinterpreting whatever is in the <my-language> tags as HTML code? All the code in my language would show up as plain text on the website from what I can see.
  2. How can I implement my parser into the JS file? I'm not asking how to parse a custom language, just where to put it. The first link mentions a createdCallback() function that is called when a <my-language> tag is used. Assuming nobody adds a <my-language> tag with JavaScript later (which for this language that would be pointless) that callback should be called anytime the custom tag is used.
  3. To parse my language, should I access the innerHTML attribute of my custom tag? I don't know if by parsing time the tag even has that attribute, or if I have to add that attribute, as I'm not familiar with how that part of it works.

Thanks for putting up with my silly questions. I like to dive into the deep end with this stuff even though I'm fairly new at this part of scripting. Basically, this is what I want the code to look like:

<!DOCTYPE html>
<html>
    <head><script src="my-lang.js"></script></head>
    <my-language>
        //do some stuff in my language, like DOM editing. 
        //Just a replacement for JavaScript basically that doesn't serve much purpose.
    </my-language>
</html>

Any suggestions would be appreciated. Thanks in advance!

Solution

  • Rather than using a new nonstandard tag in the HTML, I would recommend considering using a <script> tag. Although <script> tags are often for Javascript, this is not always the case. For example, one possible technique for the server to send data for the client's JS to parse is to put JSON in a tag like <script type="application/json">{"foo":"bar"}</script>. Scripts with types other than type="javascript" will not be attempted to be parsed as Javascript, but the data inside the tag can be retrieved with Javascript. You can do that by selecting the tag and then accessing its textContent property. (The innerHTML property is probably only appropriate when you deliberately want to retrieve HTML markup - otherwise, probably best to use textContent)

    You can use nearly the same technique, but rather than JSON.parseing the content of the <script> tag, send it through your parser.

    For example:

    const tag = document.querySelector('script[type="myNewLanguage"]');
const scriptText = tag.textContent;

// use your parser to parse scriptText
scriptText.split('\n').forEach(line => {
  console.log(line);
});
    <script type="myNewLanguage">foo
bar
baz</script>