am using lat/lon to display locations on a lwc lightning-map component. As a result of using lat/lon coordinates to define the pins, the list view is showing the lat/lon coordinates underneath the name of each pin which is totally not what is required. Im trying to hide the lat/lon in the listview without success - any suggestions on how to apply a 'display:none' to the span that is containing the lat/lon in the listview?

  • Please share a screen capture of what you're experiencing and also the code
    – Alba Rivas
    Sep 6 at 10:14
  • Unfortunately not my code to share sorry. I can rephrase as ‘is it possible to apply css to dom elements within a standard lwc?’. So far Ive not been able to - any examples would be really helpful. Sep 6 at 21:13

LWCs live within a Shadow boundary (their DOM elements belong to the component shadow DOM). That means, in short, that your CSS cascading styles can't leak into the component DOM elements. The alternatives that you normally have to overcome this are:

  • Use Styling Hooks - but they're not available yet for lightning-map
  • Copy the base component implementation and make your own - but lightning-map is not open sourced as of today
  • If you're using LWC on the platform, know that we use a synthetic version of Shadow DOM. You can use some hacks to hook into component DOM elements. I don't recommend this option as those hacks will probably break soon. This is, if you can live with the out of the box implementation of the component, better avoid hacks.
  • If you're using components outside of the platform, take a look at the Light DOM feature that comes with Winter '22.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.