Can an LWC component get its own name?

Question

I have an LWC component, let's say dummyComponent. Is there a way that i can get the name of this component from inside this component? Some like this:

this.getName();

The purpose behind this is that I'd like to make a custom metadata so administrators can set thresholds related to that component. The name of the metadata record would be the same as the name of the component. The component gets the threshold and analyses it against data from an api call. This component is in a flow and based on these thresholds(good or bad) one of the radio button choices will be set as default. The component in the flow is inserted dynamically so there can possible be any number of components available for insert. I hope this rambling summary helps to clarify why id like to know how to get the name.

Answer 1

Either you can directly get info from this.template.host:

// testComponent.js
connectedCallback() {
  console.log(
    this.template.host.localName // c-test-component
      .split('-')              // ['c', 'test', 'component'] 
      .slice(1)                // removes ns prefix => ['test', 'component']
      .reduce((a, b) => a + b.charAt(0).toUpperCase() + b.slice(1)) // converts to camelCase => testComponent 
  );
}

Element.localName read-only property returns the local part of the qualified name of an element.

Having the local name of the component (e.g. c-test-component) we can process it to get get rid of the namespace prefix and to convert the dash-separated string to camelCase.

Answer 2

I riffed off this StackOverflow answer and came up with a one-liner that returns the name of the LWC component when deployed to Salesforce. It leverages the fact that JavaScript Error instances include the name of the file they came from in their stack property, so you just need the right regular expression to tease out the part you want:

/([^(/]*?)\.js/g.exec(new Error().stack)[1]

Something like this in a LWC called lwcApp will output "lwcApp" to the console:

import { LightningElement } from "lwc";

export default class LwcApp extends LightningElement {
  connectedCallback() {
    console.log(/([^(/]*?)\.js/g.exec(new Error().stack)[1]);
  }
}

To unpack this:

• When you create a new Error instance, it comes with a stack property that looks like this (note the location of "lwcApp"):

Error
    at o.connectedCallback (modules/mynamespace/lwcApp.js:4)
    at callHook (aura_prod.js:37)
    at aura_prod.js:12
    at di (aura_prod.js:12)
    at Mo (aura_prod.js:12)
    ...etc...

• The regular expression /([^(/]*?)\.js/g looks for text in between a forward slash or open parenthesis and the sequence ".js".
• The exec function returns only the first match (conveniently for our purposes here). See MDN docs.
• exec's return value is an array where the first item is the entire match and subsequent items are the parenthetical capture groups within the match. We care about the first capture group, hence [1].

Hope it helps!

Answer 3

This works well for me...

this.constructor.name[0].toLowerCase() + this.constructor.name.slice(1)