Questions tagged [shadow-dom]

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

Filter by
Sorted by
Tagged with
0 votes
1 answer
62 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(...
user avatar
  • 11
1 vote
3 answers
422 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, ...
user avatar
0 votes
0 answers
77 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 ...
user avatar
0 votes
1 answer
41 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.
user avatar
  • 750
0 votes
1 answer
95 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', ()=> { ...
user avatar
  • 41
1 vote
1 answer
84 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 ...
user avatar
  • 344
0 votes
2 answers
80 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&...
user avatar
  • 3
0 votes
1 answer
575 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 ...
user avatar
3 votes
2 answers
3k 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 ...
user avatar
3 votes
2 answers
788 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} ...
user avatar
0 votes
1 answer
2k 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 ...
user avatar
8 votes
2 answers
660 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 ...
user avatar
6 votes
1 answer
620 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 ...
user avatar
2 votes
4 answers
3k 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 ...
user avatar
6 votes
3 answers
12k 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 ...
user avatar
  • 130k
2 votes
0 answers
83 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 (...
user avatar
  • 33.6k
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="...
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:...
user avatar
13 votes
1 answer
7k 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 ...
user avatar