18
votes
Accepted
Understanding shadow dom in Lightning web components
The Shadow DOM have three primary effects: DOM access, CSS isolation, and event propagation. LWC components are "first-class" DOM elements. Whenever you're outside the component, you see the component ...
- 500k
8
votes
Inconsistencies between shadow DOM and synthetic DOM on LWC OSS
After looking into all repos and issues for LWC, we have found the solution on the bottom readme of the LWC Recipes OSS repo:
The Edge browser currently doesn't support native shadow DOM. If you want ...
- 141
7
votes
Accepted
LWC -- How to check if user click is outside of a component inside the component's JS?
You can do this with window listeners, apparently. Here's a quick playground I wrote up (but we can't save, so you'll have to copy-paste):
tooltip.js
import { LightningElement } from 'lwc';
export ...
- 500k
7
votes
How to make buttons in a lightning-datatable smaller in LWC?
Thanks to Wei Ni's answer (do upvote that), I think I now better understand what is going on.
I have been adding this CSS to my component:
.scaled-down button {
transform: scale(0.75);
}
which ...
- 137k
5
votes
Accepted
lightning:icon pointing to SVG static resource has empty shadow root
I got this to work. Your SVG should look more like the following:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ...
- 500k
4
votes
Accepted
How to make buttons in a lightning-datatable smaller in LWC?
1.5 years later there seems to be a cleaner way if you're OK with using a beta feature.
https://www.lightningdesignsystem.com/platforms/lightning/styling-hooks/
You need to go to LDS page for the ...
- 24.1k
4
votes
How to make buttons in a lightning-datatable smaller in LWC?
I haven't tried it myself, but if this can get background color working, it should work for the size as well.
https://sfdcfacts.com/lwc/color-columns-of-data-table-lwc/
Basically, what it does is ...
- 609
4
votes
Accepted
Adjust and fix appearance of lightning-map LWC component
This is finally getting improved in Spring 21 release.
You can remove the not needed buttons with the new property mapOptions
mapOptions = {
'disableDefaultUI': true // when true disables Map|...
- 91.6k
3
votes
Accepted
CSS class not getting added to the LWC
Unfortunately, only standard SLDS classes work with cellAttributes, but you are fortunate that we have a standard class to make text red. Use slds-text-color_destructive to get the red font color.
- 12.2k
2
votes
Adjust and fix appearance of lightning-map LWC component
Unfortunately, there's nothing you can do from a Stylesheet perspective because the map is embedded in an iframe. Style defined in a parent window can't affect a child document in an iframe. That ...
- 4,449
2
votes
LWC render nested component within lightning-record-edit-form
That's just not possible; as you've (correctly) guessed, the Shadow DOM prevents these components from speaking to each other. The lightning-input-field and lightning-output-field must be children of ...
- 500k
1
vote
Accepted
Access dom element from <head> in experience builder
I know this is a bit late but I just did something similar and I got it to work. I ended up using the window onload event and it worked.
Its possible the console is showing null because the body is ...
- 1,431
1
vote
Rendered LWC has no extra attribute in rendered element
So the extra attributes don't get added unless there's a css file (and it's not empty) in the lwc bundle. There was just an issue in the deployment to the second sandbox and the css file disappeared.
- 354
1
vote
LWC -- How to check if user click is outside of a component inside the component's JS?
@sfdcfox here is my tooltip component's code (it was too long to post as a comment reply):
tooltip.html
<template>
<div onclick={insideClick} class={tooltipStyle}>
<button class=&...
- 67
1
vote
Accepted
Lightning Datatable - Dynamically Hide actions for specific rows on the basis of data
You are putting cellAttribute inside typeAttribute both should be separate like this
typeAttributes: { rowActions: actions},cellAttributes:{class:{fieldName:'cssClass'} }
you can also directly use &...
- 3,035
Only top scored, non community-wiki answers of a minimum length are eligible