Questions tagged [shadow-dom]

The tag has no usage guidance, but it has a tag wiki.

Filter by
Sorted by
Tagged with
1 vote
0 answers
60 views

Nested slot tags inside synthetic shadow

We try to test automatically our Sales Force application via Playwrigth.But to steer page components we'd like to fully understand synthetic Shadow polyfill. How it's possible to have 2 synthetic ...
Mariano López Cortés's user avatar
0 votes
1 answer
3k views

LWC add custom data-type checkbox and extending lightning-datatable

I have a requirement where I have implemented the lightning-dataTable with the custom-dataType column checkbox. As you can see in the screenshot, I have a requirement where onCheck of the parent row(...
tamanna's user avatar
  • 11
2 votes
3 answers
13k views

How to use querySelector inside forEach in HTML file of LWC bundle?

This might be super easy but I am stuck. I have a lightning card inside forEach on the template. In Javascript, I need to find the card, and add dynamic css based on some business logic. However, ...
Ayush Goyal's user avatar
1 vote
0 answers
702 views

Inject Angular JS in LWC

We have a proper Angular JS 1.4 application with App, Controller and service layers that works in VF page which we need to replicate exactly in LWC. We have tried using LWC:dom="manual" to ...
Selva Prabhu's user avatar
0 votes
1 answer
111 views

Correct representation of DOM in LWC?

Sharing my visual understanding of DOM. Please let me know if this is correct? Also please do share more useful material or your viewpoints. Will be helpful.
Mohit K's user avatar
  • 748
0 votes
1 answer
693 views

Access dom element from <head> in experience builder

I am trying to access a dom element from the in lightning experience by adding the script <script type="text/javascript"> document.addEventListener('DOMContentLoaded', ()=> { ...
mSinisa's user avatar
  • 51
1 vote
1 answer
248 views

Rendered LWC has no extra attribute in rendered element

I have a lightning web component that renders extra attributes in its HTML elements (as expected) which is the correct behavior according to the documentation: To ensure CSS encapsulation, each ...
unhinged's user avatar
  • 354
0 votes
2 answers
206 views

Salesforce Dom dynamic behaviour

Last week the structure is with li elements and now the HTML structure is changed. This is for Salesforce Contacts object.Please see the image. <div id="suggestionsList"> <ul&...
stdk's user avatar
  • 3
1 vote
1 answer
966 views

LWC render nested component within lightning-record-edit-form

I am working on building a LWC that componentizes lightning-record-edit-form, but the form cannot evaluate the lightning-input-field when the fields are nested within another component. The basic ...
user52915's user avatar
4 votes
2 answers
6k views

LWC -- How to check if user click is outside of a component inside the component's JS?

I have a simple tooltip (not modal) that after it is opened if the user clicks outside of the component it should close. In aura, we were able to do this pretty simply by adding a function in the ...
babyYoda's user avatar
3 votes
2 answers
1k views

CSS class not getting added to the LWC

I Have created an LWC component with following files .HTML file ... <lightning-datatable key-field="id" data={data} columns={columnsInProgress} is-loading={tableLoadingState} ...
Nishant Singh Panwar's user avatar
0 votes
1 answer
3k views

Lightning Datatable - Dynamically Hide actions for specific rows on the basis of data

I have a lightning data table with some columns and row-actions. These row actions are configured dynamically on the basis of row data. For example, If I am fetching some Payments data into my table ...
Gaurav Sharma's user avatar
8 votes
2 answers
1k views

Event propagation with bubble true in LWC

I'm trying learn event propagation in LWC. As per the documentation it says {bubble: true, composed: false} means the event does not cross the shadow boundary, but it bubbles up the shadow boundary. I ...
Ranjith U K's user avatar
6 votes
1 answer
877 views

Inconsistencies between shadow DOM and synthetic DOM on LWC OSS

We've been working on porting our LWC components from platform into LWC OSS. In order to do this, we have a copy of SLDS classes we have created and we need them to be applied globally. For us it will ...
Armando Ruiz's user avatar
2 votes
4 answers
4k views

Adjust and fix appearance of lightning-map LWC component

In my Lightning Web Component, I am using the <lightning-map> Base Component to display a Google map. I have a few display issues and things I would like to adjust, but It doesn’t work as ...
Robert Sösemann's user avatar
8 votes
3 answers
15k views

How to make buttons in a lightning-datatable smaller in LWC?

I have a lightning-datatable in my Lightning Web Component (LWC) that has several buttons in each row (first button only shown here): These standard-sized buttons consume quite a lot of vertical ...
Keith C's user avatar
  • 134k
1 vote
0 answers
112 views

Why LEX is sometimes rendering <slot>-elements (shadow DOMs) on same flexipage for one user but not for the other user?

The core question is reduced and skipping the "Why do I ask this and what do I want to achieve?". Read the "Background notes" at the end, if you want to know the ugly truth... Core question Why LEX (...
Uwe Heim's user avatar
  • 28.2k
2 votes
1 answer
2k views

lightning:icon pointing to SVG static resource has empty shadow root

An working SVG icon stored in a public static resource myicon_svg <?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g id="...
Robert Sösemann's user avatar
1 vote
0 answers
2k views

Manipulate DOM of LWC using jQuery [duplicate]

I know I cannot do: var elements = this.template.querySelectorAll('[id^="fieldName"]')[0]; elements[0].getElementsByTagName('lightning-formatted-text')[0].setAttribute("style:", "myCSSAttribute:...
picklenic's user avatar
14 votes
1 answer
10k views

Understanding shadow dom in Lightning web components

I'm looking at the shadow Dom in the lwc developer guide and found below statements. Shadow DOM is a web standard. To make development easier for component authors, the Lightning Web Components ...
Hemavantha Rajesh Varma Mudunu's user avatar