Hot answers tagged

11 votes
Accepted

LWCs cause 10-20 seconds of lag populating a small amount of elements on the page

It's not LWC, actually, but rather Locker Service that's causing the problem. I created a pure LWC as a baseline without Locker Service interfering. This runs in a fraction of a second, much less than ...
sfdcfox's user avatar
  • 487k
9 votes
Accepted

DOM manipulation on lightning:datatable

As others have mentioned, the LockerService means you can't attack the problem via the DOM, but instead have to see what the component offers. I followed the lightning:datatable JavaScript through in ...
Keith C's user avatar
  • 136k
8 votes
Accepted

DOM manipulation using External libraries in lightning component

Those restrictions were never correctly stated and I have been working with the App Exchange review team and our technical writers to get this corrected. That "requirement" was only meant for DOM ...
Doug Chasman's user avatar
  • 10.1k
7 votes
Accepted

What is the benefit in using the $Component selector?

It's very nicely described in the documentation that you linked what it does and how it works. It's for simplicity to reference components throughout the hierarchy, without the need of explicitly ...
Boris Bachovski's user avatar
7 votes

div innerHTML with standard lightning web components

You cannot create/use innerHTML for custom components (c or lightning namespace) in LWC but you can do so for native elements. Below is the detailed explanation. lightning-input is Customized built-...
salesforce-sas's user avatar
7 votes
Accepted

How is the <template> tag used in lwc different from one used in web components?

In LWC, the LightningElement's default rendering lifecycle handles this for you. This means that you get to do less typing. However, if you want to include a different template, perhaps based on some ...
sfdcfox's user avatar
  • 487k
7 votes

DisconnectedCallback in LWC

No, disconnectedCallback only works when the app is still loaded and the component is unloaded. on close tab. on browser close. shut down the machine. Use onunload to do any last second reactions. ...
sfdcfox's user avatar
  • 487k
6 votes

Using this.template.querySelectorAll() to modify the DOM in Lightning Web Component

It's not clear to me why you need to do this imperatively. Would the following accomplish the same thing? <template if:true={teamRecords} > <template for:each={teamRecords} for:item="...
Eugene Kashida's user avatar
6 votes
Accepted

Distinguish between the Standard DOM event and the CustomEvent

The Standard DOM event raised by LWC Component cannot be overridden by its CustomEvent which has the same name or not. It is also impossible to "mute" dispatching the Standard DOM events. ...
Oleh Berehovskyi's user avatar
5 votes
Accepted

getBoundingClientRect() does not work in lightning component?

You're possibly overthinking it. Debugging from a FilteringProxyHandler will result in the illegal invocation error you're seeing, but simply accessing the parameters normally shouldn't cause an error:...
sfdcfox's user avatar
  • 487k
5 votes

Onclick handler doesn't fire in dynamically-added dom element

I was able to get something to work by calling addEventlistener rather than setting an attribute. However, I wasn't able to add a regular Lightning controller function via component.getReference() - I'...
Caspar Harmer's user avatar
5 votes

How to add a <meta>-Tag for an Lightning app

you can get the response here Two Options 1.- If you are building a Community, You can Add it from All Communities -> Builder -> Settings -> Advanced -> Edit Head Markup 2.- ...
Edu Trujillo's user avatar
5 votes

Document.fullScreen API implementation in Lightning Web Components(LWC)

Locker is currently preventing access to the fullscreen API, not LWC. You can try out the following snippet of javascript in the Locker console. document.body.requestFullscreen // Locker OFF: ...
pmdartus's user avatar
  • 2,647
5 votes

DisconnectedCallback in LWC

I checked this example, the disconnectedCallback gets called only when the parent component unloads it. Check this playground I have added if:true on the child component which is getting changed via ...
Rahul Gawale's user avatar
5 votes
Accepted

DHTMLX Gantt in LWC

When you try to use this in a callback function the context changes and you loose reference to the class instance, read here The old solution is to store a reference to this(Class instance) in a ...
Anmol Kumar's user avatar
  • 3,599
5 votes
Accepted

Can you know if a component's event is handled?

No. Strictly speaking, unless you come up with some arrangement with the parent, you cannot tell if an event was actually handled. What would that look like? @api eventHandled() { if(this.eventFired)...
sfdcfox's user avatar
  • 487k
4 votes
Accepted

How to modify innerHTML/DOM of an HTML element in a lightning component?

In Lightning I would be much more inclined to create this list through an aura:iteration at the component markup level, bound to an array that you can set, rather than appending strings to innerHTML. ...
Charles T's user avatar
  • 11k
4 votes
Accepted

How to get all buttons in my page from a controller javascript function(component, event, helper)?

Add an aura:id to the <ui:button /> component, then find the button by it. component: <ui:button aura:id="btn" label="A" press="{!c.disableMe}"/> <ui:button aura:id="btn" ...
Praveen's user avatar
  • 10.1k
4 votes
Accepted

JavaScript reading visualforce binded variables

'{!bvs.Status__c}' is guaranteed to never be null, because even if Status is an empty string, your code effectively evaluates as: if('' != null) { Clearly, "empty string" is not the same as null, so ...
sfdcfox's user avatar
  • 487k
4 votes

How to copy one XML Dom onto another?

Using the Dom.Document interface, there's no way to append a node arbitrarily as a child to another node. You could write such a function, though, by accepting two nodes in a function, the target and ...
sfdcfox's user avatar
  • 487k
4 votes
Accepted

AfterRender on button in Lightning Component (DOM update)

I would not use afterRender to attach events, as you'll end up possibly adding duplicate events. Here's a simplified version that does not rely on a renderer: <aura:application > <div id=...
sfdcfox's user avatar
  • 487k
4 votes
Accepted

The key attribute, and docs on LWC Virtual DOM

There's a library used called Snabbdom for the VDOM. It's short, elegant, and will probably give you most of what you need to know. At a high level, there are VNode elements that are placed in a VDOM ...
sfdcfox's user avatar
  • 487k
4 votes

Dynamically set the onclick function in LWC button

You don't have to manually apply onclick event listener to <lightning-button>. But you can handle this or any other event in the container component. Just define the function handleNext: <!--...
Oleh Berehovskyi's user avatar
4 votes
Accepted

Jest Test - element.shadowRoot.querySelector() not retrieving element when given an id

This is more an LWC thing than a Jest thing. It isn't recommended to use querySelector() with the id attribute in LWC (see docs), as the id "may be transformed into globally unique values when the ...
Matthew Souther's user avatar
3 votes
Accepted

Export a CSV using lightning Component without DOM modification

Modern browsers support Data URIs, meaning that you can do this: app <aura:application > <ui:button label="Download" press="{!c.download}" /> </aura:application> controller ({...
sfdcfox's user avatar
  • 487k
3 votes

AfterRender on button in Lightning Component (DOM update)

Since you have an aura:id on your button(s), why not simply use the toggle utility method to remove/add the class you need to highlight the button being pressed "onclick"? Javascript in the context of ...
glls's user avatar
  • 20.1k
3 votes
Accepted

Retrieve elements created with Aura:Iteration

This could depend on a lot of things. For example, if your <aura:iteration> is looping over data that you're retrieving via an Apex controller, then the first time it is rendered there will be ...
Aidan's user avatar
  • 13.6k
3 votes

Is the DOM oninput event supported in LWC?

As mentioned in the documentation The native HTML element provides two events, input and change. The lightning-input component provides two custom events, change, and commit. The component's change ...
Anmol Kumar's user avatar
  • 3,599
3 votes

Lightning Datatable CellAttributes Dynamic Styling is not applied on change of Data Rows

Take a look at the sample I put together. Basically I am highlighting the first cell green on load, then, through a button click, I am highlighting the second cell below to green and then changing the ...
Bryan Anderson's user avatar
2 votes
Accepted

Map one xml to List of SObject?

The Apex DOM parser is the simplest to use. The code would look something like this: public static Advertiser__c[] parseXML(String xmlValue) { Dom.Document doc = new Dom.Document(); doc.load(...
Keith C's user avatar
  • 136k

Only top scored, non community-wiki answers of a minimum length are eligible