Hacker News Reader

Comment by echoangle | Hacker News Reader

How is it not possible? Can you not just use classes for the map tags and keep everything else the same? Or is the problem that the map styles are affected by the classless CSS?

View on HN

Yes, map styles are affected by the classless CSS.

But can’t you just do

  #map{
    foo: initial
  }
  #map *{
    foo: initial
  }

For the styles that are a problem? That’s maybe 10 properties you need to remove?

I guess you're right and "impossible" was too strong of a statement. I just didn't feel like debugging those CSS things, especially when adding any new Leaflet plugins, or any other things. So I just switched to a style that I knew will work robustly.

I find "removing" or resetting styles kind of hacky.

Another solution might be packing the map in a shadow element so that it doesn't get affected by the page CSS.

Another thing that one could try:

Use a CSS preprocessor to add a

  :not(.nostyle)

To all rules, and then add the nostyle class to all elements you want to exclude. The problem would be that you have to add the class to every single element (and all children) to exclude them, and there seems to be no good way of having

  selector:not(.class and all children of .class)

The Shadow DOM method is really interesting though, I’ve never used it anywhere but it looks like it’s perfect for this application.

Reply on news.ycombinator.com