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?
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.