Search code examples
htmlmarkupcustom-element

Custom elements good for markup only?

To create custom components, we can use custom elements. Even if we like me don't use custom components, custom elements can be used anyway, as markup. I use Vue at the moment.

Instead of this:

<div class="row>

I could use this:

<t-row>

It's a bit shorter and with a big template, it would save quite a bit of code size.

I have a few questions about this approach:

  • Which will perform better in general? A div or custom element? How much does the number characters matter? I have a large table with maybe 1000 of elements on the screen at the same time. A small performance on one element may have a big impact.
  • Is it a good practice to use custom elements when custom components are not bound to them?
  • In Vue we can add ignoredElements to ignore elements like [/^t-/]. How will that affect performance?

All this boils down to a single question...

Should I use custom elements as markup if I feel it could save me time and improve readability? Explain why.

Solution

  • An answer to question #2, arguments why not to do it:

    GZip

    You have to take GZip into account

    Yes <div class="row"> is more to type
    but might actually create a smaller file delivered to the browser
    because you used it so much and GZip encoded that 17 bytes to a few BITS.

    Good code

    IMHO a developer should think about delivering the best code to his/her successor,
    not about optimization he/she is the only one to understand.

    The first response to <t-row> will be What the Fuk is going on here
    not Oh this is readable.

    Namespace

    Another IMHO

    Do not use t- just because you want to create a custom element,

    namespaces should have meaning.