Description
(Background/reference: https://developers.google.com/web/fundamentals/web-components/shadowdom#reset)
By default, some (author provided) CSS properties are inherited from body/html elements into the map element, e.g. text-transform, letter-spacing, font-size etc.
This may cause unexpected issues in the map layout or its components. The following CSS is applied in both cases as shown below, whereas in the bottom map elment :host { all: initial; } is applied:
html {
letter-spacing: 5px;
}
As such we may want to reset everything before leaflet.css/mapml.css/other :host styles are applied (result would be that of the bottom map), by setting the all property to initial. Of course, in some cases we may want to explicitly allow inheritance if we find use cases for it by setting {property}: inherit in mapml.css/:host.