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 ...
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 ...
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 ...
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-...
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 ...
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. ...
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="...
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.
...
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: ...
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:...
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.-
...
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'...
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 ...
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 ...
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)...
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 ...
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" ...
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=...
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 ...
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:
<!--...
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 ...
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 ...
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 ...
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
({...
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 ...
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 ...
2
votes
Accepted
Root Element with two or more namespace in a XML Document
You can set as many namespaces as you'd like with setNamespace. Here's a trivial execute anonymous script:
Dom.Document doc = new Dom.Document();
Dom.XmlNode root = doc.createRootElement('root','http:...
2
votes
Accepted
getBodyDocument returns null
You have to set the document yourself in order to use it in a mock callout:
HttpRequest r = new HttpRequest();
Dom.Document body = new Dom.Document();
body.load('<?xml version="1.0" encoding="utf-...
2
votes
How to pass the XML as a url in DOMParser
On item 1, not too clear what your problem is, but to call the code with a URL you would use:
Strign url = 'https://...';
new DomDocument().parseResponseDom(url);
(See the DOM.Document documentation ...
2
votes
DOM manipulation on lightning:datatable
I was looking for the same answer and google led me down this path. After a little more research I discovered that the accepted answer here is outdated.
Keith C's answer will work and is now ...
Only top scored, non community-wiki answers of a minimum length are eligible
Related Tags
dom × 93lightning-web-components × 28
lightning-aura-components × 24
javascript × 17
apex × 13
lightning × 13
xml × 12
lwc-dom × 11
visualforce × 10
html × 6
lightning-experience × 5
document × 5
locker-service × 4
security-review × 4
aura × 3
lightning-apps × 3
rerender × 3
xss × 3
shadow-dom × 3
batch × 2
jquery × 2
lightning-datatable × 2
event × 2
button × 2
javascript-controller × 2