5

Example:

<lightning:badge label="Lightning Component"/>
<span class="slds-badge">DOM Tag</span>

Which is better? Which is faster? And why should I use Lightning component if I am good with normal DOM elements and SLDS classes?

3 Answers 3

10

Badge is relatively very simple component. However, the main difference even for simple component is that lightning base components are loaded as custom components and you cannot reach into the DOM for customisation. For example, in lightning:badge, you cannot have hyperlink, but using raw HTML, you can have hyperlink as everything is in your hands. Sample:

enter image description here

Also, when you compare complex components like datatable or fileUpload, its highly time consuming for implementing through raw HTML. Another example is spinner for which if you want to add some info you have to use raw HTML (example - How to add some informative text to loading spinner?).

Conclusion: It is always better to use lightning components as they provide encapsulation and upgraded with salesforce upgrades BUT if you need custom functionality which cannot be attained through standard component, then you can use raw HTML with slds classes

2
  • Thank you for your answer. I need one more clarification. what about the performance? will It get reduced if I am using too many standard lightning components in my app? Sep 13, 2019 at 4:50
  • Not really, before introduction of webcomponents, browsers were not supporting custom cumponents because of which Aura library used to created HTML elements at run time and load which WAS performing very slow... but after introduction of web components, browsers inherently support custom components as shown in answer and no need of custom rendering and so it will be same - aura is also using web components in backend - so no difference in performance Sep 13, 2019 at 4:53
5

In lightning:badge, there is not much difference.

Suppose there is scenario where you have a form and you want to build upload document functionality in form, then it will be to difficult if you are using native HTML tag and you need to write all logic manually so that it will work.

But if you are using lightning:fileUpload tag, here you need to give some parameters and it is ready to use. This will save your time for developing functionality in lightning.

5

Using the component makes the code marginally more readable, and you get "free upgrades" if SLDS ever changes its specification of a badge. You're always free to use whichever you like. I would personally use the component as a matter of preference, since it is more consistent to read component code than raw HTML, especially in a larger component.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .