Home/ Questions/Q 9195791
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T21:42:23+00:00

Is it alright to define and use custom tags? (that will not conflict with

  • 0

Is it alright to define and use custom tags? (that will not conflict with future html tags) – while replacing/rendering those by changing outerHTML??

I created a demo below and it seems to work fine


    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <script type="text/javascript" src="jquery.min.js"></script>
    </head>

    <body>

    <div id="customtags">
        <c-TextField name="Username" ></c-TextField> <br/>
        <c-NameField name="name" id="c-NameField"></c-NameField> <br/>
        <c-TextArea name="description" ></c-TextArea> <br/>
        <blahblah c-t="d"></blahblah>
    </div>
    </body>


    <script>

    /* Code below to replace the cspa's with the actual html -- woaah it works well */    
        function ReplaceCustomTags() {
            // cspa is a random term-- doesn;t mean anything really
            var grs = $("*"); 
            $.each(grs, function(index, value) {
                var tg = value.tagName.toLowerCase();
                if(tg.indexOf("c-")==0) {
                    console.log(index);
                    console.log(value);
                    var obj = $(value);
                    var newhtml;
                    if(tg=="c-textfield") {
                        newhtml= '<input type="text" value="'+obj.attr('name')+'"></input>';
                    } else if(tg=="c-namefield") {
                        newhtml= '<input type="text" value="FirstName"></input><input type="text" value="LastName"></input>';
                    } else if(tg=="c-textarea") {
                        newhtml= '<textarea cols="20" rows="3">Some description from model</textarea>';
                    }
                    obj.context.outerHTML = newhtml;
                }


                z = obj;
            });
        }

        if(typeof(console)=='undefined' || console==null) { console={}; console.log=function(){}}

        $(document).ready(ReplaceCustomTags);
    </script>
    </html>

Update to the question:

Let me explain a bit further on this. Please assume that JavaScript is enabled on the browser – i.e application is not supposed to run without javascript.

I have seen libraries that use custom attributes to define custom behavior in specified tags. For example Angular.js heavily uses custom attributes. (It also has examples on custom-tags). Although my question is not from a technical strategy perspective – I fail to understand why it would strategically cause problems in scalability/maintainability of the code.

Per me code like <ns:contact …..> is more readable than something like <div custom_type=”contact” ….> . The only difference is that custom tags are ignored and not rendered, while the div type gets rendered by the browser

Angular.js does show a custom-tag example (pane/tab). In my example above I am using outerHTML to replace these custom tags – whilst I donot see such code in the libraries – Am I doing something shortsighted and wrong by using outerHTML to replace custom-tags?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I can’t think of a reason why you’d want to do this.

    What would you think if you had to work on a project written by someone else who ignored all common practices and conventions? What would happen if they were no longer at the company to find out why they did something a certain way?

    The fact that you have to just go through with JavaScript to make it work at all should be a giant red flag. Unless you have a VERY good reason to, do yourself a favor and use the preexisting tags. Six months from now, are you going to remember why you did things that way?

    • 0